为什么jQuery在点击时什么都不做？ [复制]答案

【问题标题】：Why does jQuery do nothing On Click? [duplicate]为什么jQuery在点击时什么都不做？ [复制]
【发布时间】：2014-04-16 21:44:39
【问题描述】：

我今天有一个非常奇怪的问题。我正在使用 jQuery、Ajax 和 PHP 构建一个巨大的应用程序。

基本上，一旦页面加载，我会使用 PHP 加载 div 的内容。

<div id="samplediv">
    <a href="#" id="click1">Test1</a>
    <a href="#" id="click2">Test2</a>
    <a href="#" id="click3">Test3</a>
</div>

当有人点击这些时，应该会出现一个警报，如下所示：

$("#click1").on("click", function(){
    alert(1);
});

但是如果客户端点击

<a href="#" id="click_here">Click</a>

一个 jQuery 函数的触发方式如下：

$("#click_here").on("click", function(){
    fillDiv();
});

fillDiv()函数基本上是调用和ajax函数并用结果填充div，PHP页面返回。

这与顶部 div 基本相同。 php 返回以下内容：

        <a href="#" id="click1">Test1</a>
        <a href="#" id="click2">Test2</a>
        <a href="#" id="click3">Test3</a>

fillDiv() 函数将其放入samplediv。我检查了 2 结果的 HTML 是否完全相同！

问题：

当项目从 Ajax 函数加载回来时，使用完全相同的 html，如果我单击任何 Test1、Test2、Test3 链接，实际上我什么也没得到。没有警报，什么都没有。甚至没有错误消息。

可能是什么问题，我没有遇到？

【问题讨论】：

使用 jquery live $('#id').live('click',function(){});
您要替换元素对吗？然后，除非您使用事件委托，否则他们将丢失所有分配的事件。
@NinjaDevelopers 不要活在过去。 .live 在 1.7 中被弃用，在 1.9 中被移除。 .on 应该用于事件委托。
live() 在最新的 jQuery 版本中被贬低。我正在使用点击
live 自 jQuery 1.9 起已弃用。

标签： javascript php jquery html ajax

【解决方案1】：

您需要将 .on() 方法更改为延迟选择器，因为您正在刷新元素。比如：

$("body").on("click", "#click1", function(){
    alert(1);
});

【讨论】：

【解决方案2】：

.live() 实际上已被弃用。

试试这个：

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

【讨论】：

得到完全相同的结果。
使用document 可能有点过分了，不过可以。如果可以使用在 ajax 中加载的节点的父节点，我建议在第一个选择器中使用。
试试我的。您的锚标签可能是罪魁祸首，因为它们表面上被视为链接。我建议您将它们更改为 div 或 span。
啊是的，你可以添加这个：function(e){ e.preventDefault(); alert(1); 以防止它跟随链接并改为执行 jquery click

【解决方案3】：

我认为（仅凭我对 jQuery 的了解）这可能是因为 DOM 没有再次加载。这种方式 jQuery 不知道有新的元素要遵循。

除此之外，您可能希望使用 .click 事件处理程序而不是 .on

【讨论】：

【解决方案4】：

问题是您在渲染元素时绑定 id "#click1" 以进行点击，该元素尚不存在，因为它将是使用 AJAX 动态插入的，因此该解决方案将在它存在时起作用

试试这个：

$(document.body).on('click', '#click1' ,function(){ 
// Your logic here
}

$(document.body).on('click', '#click2' ,function(){ 
// Your logic here
}

$(document.body).on('click', '#click3' ,function(){ 
// Your logic here
}

【讨论】：

【解决方案5】：

改变这个：

$("#click1").on("click", function(){
    alert(1);
});

到：

$(document).on("click", "#click1", function(e){
    e.preventDefault();
    e.stopPropagation();
    alert(1);
});

【讨论】：

实际试过了，改了之后没有任何反应。
你是在 DOM 准备好之后设置这个监听器吗？里面$(document).ready(function (){}); ??我发现有时事件侦听器在 DOM 准备好之前不会连接。
是的，它们在 document.ready 函数中。有问题吗？
尝试将其移出该函数。我发现（似乎没有押韵或理由）有时他们在准备好的文件中工作，有时他们只在外面工作......

【解决方案6】：

更好的解决方案是使用 .on，但将其附加到 AJAX 调用未修改的 div（或正文）。

<div id="samplediv">
<a href="#" id="click1" class="clickable">Test1</a>
<a href="#" id="click2" class="clickable">Test2</a>
<a href="#" id="click3" class="clickable">Test3</a>
</div>


$("#samplediv").on("click", ".clickable", function() {
  alert(1);
}

在此处查看示例（在这种情况下，.on 附加到正文） http://jsfiddle.net/rahul71/3vDvN/

【讨论】：