Question

今天我有一个非常奇怪的问题。我正在使用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链接，我实际上没有回来。没有警报，没有。甚至没有错误信息。

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

Answer 1

您希望将.on（）方法更改为延迟选择器，因为您正在刷新元素。类似的东西：

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

Answer 2

.live（）实际上已被弃用。

试试这个：

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

Answer 3

我认为（使用我的jQuery知识）可能是因为DOM没有再次加载。这样jQuery doensn就知道有新元素要遵循。

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

Answer 4

问题是你绑定渲染id为“＃click1”的元素进行点击，这个元素还不存在，因为它将是一个动态插入的AJAX，这个解决方案可以工作时＆lt; =带有live（）的JQuery 1.7。

试试这个：

$(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
}

Answer 5

改变这个：

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

为：

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

Answer 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/

为什么jQuery什么都不做点击？

问题：

6 个答案: