jquery click事件不起作用

时间:2013-11-06 07:57:40

标签: javascript jquery

我编写了这段代码,我需要使用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))

7 个答案:

答案 0 :(得分:52)

您展示的代码和HTML工作正常here in a jsFiddle。因此,完全不像你展示的那样,这不是问题。它更可能是页面中的环境或动态HTML。一些可能性:

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

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

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

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


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

答案 1 :(得分:1)

尝试这样的事情

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

答案 2 :(得分:0)

我测试了你的代码,并且它有效。

我想你不记得添加了jquery。

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

Demo

答案 3 :(得分:0)

试试这个,

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

Demo

答案 4 :(得分:0)

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

也许你想要这个?

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

fiddle

答案 5 :(得分:0)

可能其中一个div标签落在了littlenews div上。

进行测试:

为所有div设置(border:1px red solid)。

希望能帮到你。

答案 6 :(得分:0)

确保您没有忘记将jQuery库添加到html文件中。 如果发生这种情况,请按照以下说明从Google或Microsoft CDN的<head> </head>中添加它来解决此问题。

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