Question

我有这个ajax请求：

$.ajax({
           type: "POST",
           dataType: "json",
           data: dataString,
           url: "app/changeQuantity",
           success: function(data) {
$('#table').append('<tr><td><a id="uid">click</a></td></tr>');

});

你可以看到它在#table中创建了新行。但是，下一个函数无法访问ajax生成的这些新对象。来自ajax的结果不是DOM的常规部分，或者这种奇怪行为的原因是什么？

$('#uid').on('click', function () {
alert('ok');
});

Answer 1

使用事件委托：

$(document).on('click','#uid', function () {
alert('ok');
});

Answer 2

请注意，ajax调用是异步的。因此无论你使用data做什么，都需要在success函数内的回调中执行它（即当ajax调用成功返回时调用的回调）。

Answer 3

Jquery on不能那样工作。使用必须给出一个未由ajax加载的父类，并指定ajax load元素，如此

$('#table').on('click','#uid' ,function () {
// what ever code you like 
});

Answer 4

同时简单而复杂。如果您开始使用javascript，那么解决起来很简单，但很复杂......

你的事件处理程序 - onclick被触发并绑定到一个尚不存在的对象。

因此，当您将对象附加到#table时，您需要设置单击处理程序，因为该对象现在已存在。

所以在你成功的部分ajax return中添加了click handler事件。

success: function(data) {
           $('#table').append('<tr><td><a id="uid">click</a></td></tr>');
           $('#uid').on('click', function () {
              alert('ok');
           });
       });

或者你如何使它成为动态的并创建一个功能来为你做。

function bindClick(id) {
  $('#' + id).click(function() {
     //Do stuff here
     console.log('I made it here' + id);
    });
}

然后：

success: function(data) {
  $('#table').append('<tr><td><a id="uid">click</a></td></tr>');
     bindClick(uid);
  });
}

这是一个超级人为的例子，但你明白你只需要让其余部分动态化。例如一些名称和计数器生成的ID号：id1，id2，id3 ......

Answer 5

尝试这样，将此$('#uid').on('click', function () {添加到成功

中

$.ajax({
       type: "POST",
       dataType: "json",
       data: dataString,
       url: "app/changeQuantity",
       success: function(data) {
           $('#table').append('<tr><td><a id="uid">click</a></td></tr>');
           $('#uid').on('click', function () {
              alert('ok');
           });
       });
});

无法访问由ajax调用创建的对象

5 个答案: