javascript - “on”事件未触发动态内容

Question

我有以下代码，它在事件上使用 jquery。

    $(document).on('click', 'a.test', function (event) {
        alert('');
    });

我的问题是这不会触发通过 ajax 动态添加的内容：

$.ajax({
    url: ...,
    ...
    ..
    success: function(response) {

        var dom = $(response.d.html);
        myContainer.html(dom.find('#ajaxcontainer'));
    }
});

你能帮我解决这个问题吗？我正在使用 jquery.1.7.2.min.js

Answer 1

我没有任何奇怪的问题......我认为你可能需要像调用 .on('click') 事件上的函数一样调用你的 ajax。

jsFiddle 链接

var myContainer = $('body');

$(document).on('click', 'a', function () {
  $.ajax({
    url: '#',
    success: function(response) {
        // of course here i'm appending just a regular link, but your response data would include all that html
        myContainer.append('<a class="ajaxAdded">Click this</a>');

    }
  });
});

​</p>

Answer 2

发生的情况是，由于$.ajax它是一个异步函数，您的on方法无法访问它创建的内容，可能是因为该内容尚未准备好，您需要确保您已经完成了触发事件的 ajax 请求，您可以这样做像这样检查一下：

var done = false;
$.ajax({ /*bla bla bla*/ }).done(function(){ done = true; });

if(done){/* now you can fire the event */ }