Question

I have set the data to div element and append it to another div element like this,

var dt = { id: 0 };
$.template("temp", '<div id="div2" >${id}</div>');
$.tmpl("temp", dt).appendTo("#div1");

Its working fine. I am appending it in document ready method.

My requirement is, Its(div2) click event i have to access dt.

Is it possible?

Question 2: i have set this data to a lot of elements. How to get those elements?

Thanks in advance.

Answer 1

You can use $.tmplItem:

var dt = { id: 222, text: 'My value id 222' };

$.template("temp", '<div class="innerDiv" >${id}</div>');
$.tmpl("temp", dt).appendTo("#div1");

$(document).on('click', '.innerDiv', function() {
    // gets the data item associated to the rendered template
    var dataItem = $.tmplItem(this);
    // dataItem.data holds the data itself
    alert(dataItem.data.text);
});
​

DEMO

---

For the second question, I don’t know a way to easily get the list of renderings of a specific template with the API.

What you could do though is to add a data- attribute to your template markup which would allow you to retrieve them easily:

$.template("temp", '<div id="div2" data-tmpl="temp">${id}</div>');

Then you can select all renderings which has an attribute “data-tmpl” with value “temp”:

$('[data-tmpl="temp"]')

I have updated the demo in that way.

Maybe there is some other way but I’m that familiar with jQuery template.