jquery点击事件不起作用答案

【问题标题】：jquery click event doesn't workjquery点击事件不起作用
【发布时间】：2018-10-15 19:07:02
【问题描述】：

我写了这段代码，我需要用 jquery 处理点击事件，但它在任何浏览器中都不起作用，当我点击任何元素时，什么都没有发生。 div在css中没有z-index；

洞“新闻”元素动态添加这是html代码

<div class="news">
            <div class="meta-inform">
                <div id="waiting">not accepted</div>
                <div id="accpted">accepted</div>

                <div class="edit">
                <div class="editedBy" id="editedBy" >
                    <div id="editLabel"  style="display:inline">edited by</div>
                    <div id="editorName"  style="display:inline">arvin</div>
                </div>

                <div id="editTime" class="editTime">
                    <div id="editDate" style="display:inline" >چdate</div>
                    <div id="editDate" style="display:inline">time</div>
                </div>
                </div>

            </div>

        <div id="littleNews">
            <div id="number">1000</div>
            <div id="divider1"></div>
            <div id="title">title</div>
            <div id="divider2"></div>
            <div id="littleNewsTime">time</div>
            <div id="littleNewsDate">date</div>
            <div id="divider3"></div>
            <div id="category">cat</div>
            <div id="part">part</div>
            <div id="segment">sgmnt</div>
            <div id="divider4"></div>
            <div id="writer">writer</div>
            <div id="view">view post</div>
        </div>

        <div class="functions">
            <div id="edit">edit</div>
            <div id="delete">delete</div>
            <div id="accptThis">accept</div>
        </div>
        </div>

这是我的 jquery 代码

$(document).ready(function () {
    $("#littleNews").click(function () {
        alert("hi");
    });
});

它不适用于“新闻”类中的任何元素

我有这段代码，这段代码创建了整个 div

$("#news").clone().appendTo("#mainDiv").attr("id","news"+(i+1))

【问题讨论】：

littleNews元素是动态添加的吗？？
似乎工作：jsfiddle.net/s8KNJ/embedded/result
对我也有用，在 Chrome 中测试
问题写道不适用于“新闻”类中的任何元素。 jQuery 代码根本没有引用 .news。是这个问题吗？
感谢您的关注，是的，整个新闻元素都是动态添加的

标签： javascript jquery

【解决方案1】：

您的代码和 HTML 可以正常工作here in a jsFiddle，正如您所展示的那样。因此，正如您所展示的那样，这些东西不是问题。更有可能是您页面中的环境或动态 HTML。一些可能性：

您的 HTML 元素会在您安装事件处理程序后动态添加。
您没有正确安装 jQuery。
您的脚本错误导致其他脚本无法运行。
您的网页中某处有重复的 ID。
你没有使用正确的选择器（也许你想要".news"）

如果您的 HTML 是在安装事件处理程序后动态添加的，那么您需要像这样使用委托事件处理：

$(document).ready ( function () {
    $(document).on ("click", "#littleNews", function () {
        alert("hi");
    });
});

提示：$(document) 实际上应该是最接近 #littleNews 的父级，它不是在安装事件处理程序后动态创建的。我不知道那是什么，所以我选择了最安全的$(document)，但如果你使用最近的静态父级，事情会表现得更好（特别是如果你有很多委托的事件处理程序）。

您的问题并不清楚，但如果您还希望您的事件处理程序涵盖 .news 中的所有内容，则需要更改选择器以涵盖该内容。

【讨论】：

专业提示，你可以通过反引号来避免“你必须使用代码”的事情。
谢谢朋友们，我想是因为你说的4号；我有这个代码 "$("#news").clone().appendTo("#mainDiv").attr("id","news"+(i+1))" 之前，我不能删除它，有没有办法修复点击？
@arvinkarimi - 在您希望为特定事件处理程序工作的所有项目上放置一个通用类名，然后使用该类名使用委托事件处理。假设 mainDiv 不是动态创建的，并且您将 "newsItems" 类放在每个克隆项目上，那么您可以执行以下操作：$("#mainDiv").on("click", ".newsItems", fn)
@jfriend00 我遇到了同样的问题，你解决了！我的元素是在安装事件处理程序后创建的，但我不明白......这个$(document).ready 与脚本标签上的defer 属性不一样吗？我不得不同时使用这两种方法来使我的代码工作，但我认为它是一样的！
@FranP - 我们必须更详细地了解您的具体情况才能提供建议，这里的评论不适合讨论它。 $(document).ready() 和 defer 属性肯定不是一回事。

【解决方案2】：

试试这样的

            $(document).on('click','#littleNews',function () {
                alert("hi");
            });

【讨论】：

【解决方案3】：

我测试了您的代码，并且它有效。

我想你不记得添加了 jquery。

$("#littleNews").click (function(){
 alert("hi");
});

Demo

【讨论】：

【解决方案4】：

试试这个，

$(function () {
   $("#littleNews div").on('click',function () {
      alert($(this).text());
   });
});

Demo

【讨论】：

如果您采用这种方法，您不妨将div 委托给$("#littleNews").on('click','div', fn)
@jfriend00 真正从click 切换到on 的唯一原因是为动态内容添加委托。在这种情况下，如果 #littleNews 是静态的，而它的子级是动态的。
@DerFlatulator - 现在看来（基于 OP 的 cmets）#littleNews 可能是动态的。我已经在我的答案中添加了一个委托解决方案来处理这个问题。

【解决方案5】：

您询问“新闻”类。您发布的代码没有以任何方式引用它。

也许你想要这个？

$(document).ready(function () {
    $("#littleNews, .news").click(function () {
        alert("hi");
    });
});

fiddle

【讨论】：

取决于您如何定义“工作正常”。看问题的结尾。代码有效，但结果可能不是 OP 想要的。
好吧，那么你应该在你的答案中添加一些词来解释你想要解决的问题。没有解释原因的纯代码对其他人来说不太有用，也不太清楚你正在尝试做什么。

【解决方案6】：

可能是 littlenews div 上的 div 标签之一。

用于测试：

为所有 div 设置（边框：1px 红色实心）。

希望能帮到你。

【讨论】：

【解决方案7】：

确保您没有忘记将 jQuery 库添加到 html 文件。如果它发生在<head> </head> 中从google 或microsoft cdn 添加它可以解决问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：