Manipulation dom after using jsrender

Question

Im my project I use jsrender. Below my example of code.

<script id="usersTemplate" type="text/x-jsrender">
<button id="createUser">Create</button>
<table>
<tr>
    <td>Id</td>
    <td>Name</td>
</tr>
{{for users tmpl="userRow" /}}
</table>
</script>
<script id="userRow">
<tr>
    <td>{{:id:}}</td>
    <td id="user{{:id}}">{{:name}}</td>
</tr>
</script>

After rendering I have no access to $("#createUser") How can I do it? And how can I use jqueryui button for $("#createUser") after rendering?

Answer 1

You can simply use jQuery in the usual way, such as in this example: http://www.jsviews.com/#samples/jsr/helpers

$("#movieList").on("click", "#sortBtn", myHandler);

var html = $("#movieTemplate").render(movies);

$("#movieList").html(html);

By using

$("#movieList").on("click", "#sortBtn", myHandler);

rather than

$("#sortBtn").on("click", myHandler);

you can bind the event before rendering.

But this will also work fine:

var html = $("#movieTemplate").render(movies);

$("#movieList").html(html);

$("#sortBtn").on("click", myHandler);