15

我写了这段代码，我需要用 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))
4

7 回答 7

70

正如您所展示的那样，您的代码和 HTML在 jsFiddle中工作得很好。因此，正如您所展示的那样，这些东西不是问题。它更有可能与您的页面或动态 HTML 中的环境有关。一些可能性：

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

如果在安装事件处理程序后动态添加 HTML，则需要使用委托事件处理，如下所示：

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

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

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

于 2013-11-06T08:03:52.653 回答
1

尝试这样的事情

            $(document).on('click','#littleNews',function () {
                alert("hi");
            });
于 2013-11-06T09:11:41.050 回答
0

我测试了你的代码，它的工作。

我想你不记得添加了 jquery。

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

演示

于 2013-11-06T08:00:57.330 回答
0

尝试这个，

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

演示

于 2013-11-06T08:01:31.707 回答
0

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

测试：

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

希望能帮到你。

于 2013-11-06T09:08:49.143 回答
0

你问“新闻”课。您发布的代码不会以任何方式引用它。

也许你想要这个？

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

小提琴

于 2013-11-06T08:04:45.003 回答
0

确保您没有忘记将 jQuery 库添加到 html 文件。如果它发生从谷歌或微软cdn添加它<head> </head>如下解决问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
于 2018-10-15T11:07:02.017 回答