jQuery jquery点击事件不起作用

jquery click event doesn't work

提问by arvin karimi

I wrote this code , and I need to handle click events with jquery , but it doesn't work in any browser , when I click any elements nothing happens. The divs has no z-index in css;

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

The hole "news" element adds dynamically This is html code

洞“新闻”元素动态添加 这是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>

and this is my jquery codes

这是我的 jquery 代码

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

and it doesn't works for any element in "news" class

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

I have this code and this code creates the whole div

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

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

回答by jfriend00

Your code and HTML works just fine here in a jsFiddleas you've shown it. So, it is not an issue with those things exactly as you've shown them. It is more likely something with the environment in your page or dynamic HTML. Some possibilities:

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

1. Your HTML elements are added dynamically AFTER you install the event handler.
2. You don't have jQuery installed properly.
3. You have a script error that prevents other scripts from running.
4. You have duplicate IDs somewhere in your page.
5. You aren't using the right selector (perhaps you want ".news")

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

---

---

If your HTML is added dynamically after the event handlers are installed, then you need to use delegated event handling like this:

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

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

Tip: $(document)should actually be the closest parent to #littleNewsthat is not dynamically created after the event handler is installed. I don't know what that is so I picked the safest $(document), but things perform better (particularly if you have lots of delegated event handlers) if you use the closest static parent.

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

---

---

It's unclear from your question, but if you also want your event handler to cover everything in .news, you would need to change your selector to cover that.

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

回答by rajesh kakawat

try something like this

尝试这样的事情

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

回答by Tadele Ayelegn

Make sure you did not forgot to add jQuery library to html file. If it happened adding it from google or microsoft cdn in the <head> </head>as follows solves the issue.

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

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

回答by mehmetakifalp

I tested your code, and its worked.

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

I think u dont remember added jquery.

我想你不记得添加了 jquery。

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

Demo

演示

回答by Rohan Kumar

Try this,

尝试这个，

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

Demo

演示

回答by JNF

You ask about "news" class. the code you posted doesn't reference it in any way.

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

Perhaps you want this?

也许你想要这个？

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

fiddle

小提琴

回答by azadeh noorzad

Probably one of the div tags falling on littlenews div.

可能属于 littlenews div 的 div 标签之一。

for test:

测试：

set (border:1px red solid) for all div.

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

hope help you.

希望能帮到你。