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

Question

I have this ajax request:

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

});

as you can see it makes new row in #table. But this new objects made by ajax are not accessible from next functions. Result from ajax is not a regullar part of DOM, or what is the reason for this strange behavior?

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

Answer 1

Use event delegation:

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

Answer 2

Note that ajax calls are asynchronous. So whatever you do with the data you need to do it in a callback within the success function (that is the callback which is called when the ajax call returns successfully).

Answer 3

Jquery on doesn't work like that. Use have to give a parent which not loaded by ajax, and the specify ajax load element like this

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

Answer 4

Is simple and complex at the same time. Simple to solve but complex if you are getting started with javascript...

Your event handler - onclick is being fired and bound to an object that doesnt yet exist.

So when you append the object to the #table, you need to set up your click handler as the object now exists.

So in your success part of the ajax return add the click handler event there.

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

Or how about you make it dynamic and create a function to do it for you.

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

Then:

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

This is a super contrived example but you get the idea you just need to make the rest of it dynamic as well. for example some name and counter generated id number: id1, id2, id3...

Answer 5

Try it like this, add this $('#uid').on('click', function () { into the success

$.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');
           });
       });
});