Question

比如说，我有一些按钮在点击时会调用AJAX请求。

$(document).ready(function(){
    $('button').each( function() {
        $(this).click( function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

当我点击按钮时，一切正常。

但是如果我用AJAX请求加载按钮然后点击它们，上面的代码就会停止工作。

我怎样摆脱这个？

我尝试了on()方法

$(document).ready(function(){
    $('button').each( function() {
        $(this).on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

但它也是一样的。正常工作，不适用于加载AJAX的内容。

我被困住了，请帮助我。

P.S。：我正在使用最新版本的jQuery（v1.7.1）。

Answer 1

你应该这样做：

$(document).ready(function(){
       $('body').on('click','button', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
});

这样，body元素处理click元素上的所有<button>事件，即使它们是通过AJAX添加的，它也能正常工作。

除了使用<body>标记，您还可以使用包装<button>的内容...在任何情况下都可以阅读on()的jQuery文档，这非常简单。

P.S。如果您想知道，live()与我使用on()完全一样，jQuery只是在它们冒泡DOM时拦截事件

Answer 2

您必须在页面上已有按钮后设置点击处理程序。如果你在页面加载时这样做，那么ajax加载的按钮还没有接受处理程序赋值。

Answer 3

尝试on。

$(document).ready(function(){
        $('button').on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
    });
});

并且一个循环就足够了，不需要each循环，因为on循环本身会检测所有button元素并触发点击事件。

Answer 4

可能最安全（且最不容易出错）的方法是在用AJAX加载按钮后绑定点击事件。

Answer 5

我喜欢这个代表中的代表。

$(document).ready(function(){ 
    $('body').delegate('button','click',function(){
       alert('Clicked.');
    });
});

工作示例：http://jsfiddle.net/MarkSchultheiss/cKVGb/

关于委托，生活和绑定的一些背景讨论：http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

最后是.on（）文档，所以你也可以使用它： http://api.jquery.com/on/

所以你几乎是对的！第一个已经出现的按钮：

$(document).ready(function(){
    $('button').on('click', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});

现在是新的（和旧的）

$(document).ready(function(){
    $('body').on('click', 'button', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});

在AJAX请求后刷新jQuery代码

5 个答案: