jQuery：选择新添加的DOM节点的最佳方法是什么？

Question

I have an external template file with a structure that is dynamically added to a table when a button is clicked. When the new table line is added this way, I need to call a callback on this newly added piece of code.

I would like to know, what is the best way to select this new code. It has an ID, so it won't be a problem to write some other selector, but I was wondering if there is an easier and fast way how to select it.

Here is the piece of code:

$rightSpot.append(app.renderTemplate('temp/product', tplData ));

EDIT: This works for me, but maybe there is a better way:

$newProduct = $rightSpot.find('tr').last().find('textarea');

Answer 1

I would consider using react.js. The advantage of using react is that it works with a virtual DOM so you will not be reliant of the physical DOM to render before your callback is available.

http://facebook.github.io/react/

Answer 2

I don't know if it is the best way but you could do something like this -

 $("#giveitafriend").click(function() { $("#ab").append($("<span>") .text("I'm here too!") .css("color", "red") ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ab"> <span>On My Own</span> </div> <button id="giveitafriend">Give it a Friend</button> 

Answer 3

Assuming your renderTemplate function returns HTML element, may be you can access the new element as follows

var newElement = app.renderTemplate('temp/product', tplData ); 
$rightSpot.append(newElement);
console.log($(newElement).attr('id'));