.on（）在附加元素上不起作用（jQuery）

Question

So I'm appending a row in a table and then upon clicking a button I want to remove that row. However I can't do it in a way that seems natural, like:

$(".usun").on("click", function(){
    $(this).parent().parent().remove();
});

where .usun is a class of buttons that remove a row in a table. Of course this fragment of code is inside of $(document).ready(... . What seems to work for me is this:

$(this).on("click", ".usun", function(){ 
    $(this).parent().parent().remove();
});

and I don't understand why. Could someone explain me this?

Answer 1

There are several method signatures available for .on() which you can read about here .

Your first syntax ( $(".usun").on( ) is, just one time, attaching click handlers to each individual .usun element. If more are added later, they don't have click handlers.

The second syntax ( $(this).on("click", ".usun", function()... ) attaches a single listener to the document , saying "any time a .usun inside me is clicked, do something". This covers a case where more matching elements are added after $(document).ready is fired.

Answer 2

That is because that specific .usun does not exist yet when you are registering the event. You need to register the event to its parent element (prefereably the table id) like so:

$('#yourtableid').on("click", ".usun", function(){ //if table id does not exist, you can use $('body') instead
    $(this).parent().parent().remove();
});

This will make sure that you are attaching the events even to 'unborn' elements.

Hope this helps!

Answer 3

So you're aware of this... your question is related to live and non-live lists (collections) in javascript;

review the following Javascript,

var queryStatic = document.querySelectorAll(".usun"); //non-live | static list
var queryLive = document.getElementsByTagName("div"); //live list

queryStatic will return a NodeList that statically references the nodes that satistifed the condition of the query.

If you were to alter/modify the properties/fields/members of a node or it's element that is referenced by this NodeList outside of using the queryStatic, it would be represented in the queryStatic instance;

you cannot, however, add a new element/node to the DOM that would have satisfied the query and expect it to be in that NodeList.

queryList (an HTML Collection), however, will represent both aspects. It is a live list.

The point is, the underline concept has little to nothing to do with method signatures.

Edit

However, in the case of jQuery's .on() method; there is support for attaching the listener to a parent element (like Document ) and specifying an additional query criteria.