javascript – 在AJAX请求后刷新jQuery代码

例如,假设我有一些按钮在单击时调用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).

解决方法:

你应该做：

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

这种方式是处理< button>上的所有点击事件的body元素.元素,即使它们是通过AJAX添加的,它仍然有效.

而不是使用< body>而不是标签你可以使用包装那些< button> …的东西…在任何情况下阅读jQuery for on()的文档,它非常简单.

附：如果你想知道,live()的工作方式与我在()上使用的完全相同,jQuery只是在它们冒泡DOM时拦截事件