html - Using JQuery .after method on an element generated by JQuery -


i have table rows generated jquery , since generated on fly use selector .live method bind events. after binding event want append more rows using .after method this.

$("#additem").live("click", function (e, index) {         $('#mytable  tbody > tr:last').after('<tr><td>' + contenet + '</td></tr'>); }); 

the problem after method doesn't seem recognize table rows generated jquery works fine when test purely html rows. want know if there method live can use instead of after or workaround?

live deprecated in jquery 1.7 , removed in jquery 1.9 .

if using jquery 1.7 , above should use .on instead.

snippet jquery's documentation:

event handlers bound selected elements; must exist on page @ time code makes call .on(). ensure elements present , can selected, perform event binding inside document ready handler elements in html markup on page. if new html being injected page, select elements , attach event handlers after new html placed page. or, use delegated events attach event handler, described next.

delegated events have advantage can process events descendant elements added document @ later time. picking element guaranteed present @ time delegated event handler attached, can use delegated events avoid need attach , remove event handlers. element container element of view in model-view-controller design, example, or document if event handler wants monitor bubbling events in document. document element available in head of document before loading other html, safe attach events there without waiting document ready.

in addition ability handle events on descendant elements not yet created, advantage of delegated events potential lower overhead when many elements must monitored. on data table 1,000 rows in tbody, example attaches handler 1,000 elements:

$("#datatable tbody tr").on("click", function(event){
alert($(this).text()); });

a delegated-events approach attaches event handler 1 element, tbody, , event needs bubble 1 level (from clicked tr tbody):

$("#datatable tbody").on("click", "tr", function(event){
alert($(this).text()); });

note: delegated events not work svg.

to remove events bound .on(), see `.off()'.


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -