javascript - Why no return object when I add a tag dynamically? -
the selected "tr" tag added dynamically click event, cannot return click event. original static "tr" tags above dynamically added "tr" can return same click event.
i cannot figure out, seek here.
thanks
//eventhandler current this<tr> object $('tr').click(function () { console.log(this) } //original static <tr>, works fine <tr> <td>meet friends dinner</td> <td><time datetime="2013-10-14">2013-10-14</time></td> <td>personal</td> <td> <nav> <a href="#">edit</a> <a href="#">complete</a> <a href="#">delete</a> </nav> </td> </tr> //how add <tr> dynamically <script id="taskrow" type="text/x-jquery-tmpl"> <tr> <td>${task}</td> <td><time datetime="${requiredby}">${requiredby}</time></td> <td>${category}</td> <td> <nav> <a href='#'>edit</a> <a href='#'>complete</a> <a href='#' class='deleterow'>delete</a> </nav> </td> </tr> </script>
event handlers bound selected elements; must exist on page @ time code makes call .click()
thus in following code tr must exist before code generated.
$('tr').click(function () { console.log(this); } if new html being injected page, preferable use delegated events attach event handler, described next.
delegated events have advantage can process events descendant elements added document @ later time.
$("table").on("click", "tr", function(event){ console.log(this); }); see fiddle more information.
note: delegated-events approach (the second code example) attaches event handler 1 element, table, , event needs bubble 1 level (from clicked tr table).

Comments
Post a Comment