Ractive renders synchronously, so your second example should work (but the first one definitely won't) - unless the .button
element you're targeting is inside a section that isn't being rendered:
{{#someCondition}}
<button class='button'>click me</button>
{{/someCondition}}
In this example, if someCondition
was falsy, there'd be no DOM element for jQuery to target.
A more idiomatic way to do this with Ractive would be this:
template:
{{#someCondition}}
<button on-click='doSomething'>click me</button>
{{/someCondition}}
code:
ractive = new Ractive({...});
ractive.on('doSomething', someHandler);
That way, you never need to worry about whether the element has been rendered or not.
(Bear in mind though that the handler would need to change - this
means the ractive
instance, and the event
object passed to the handler is a Ractive event rather than a native DOM event - to get the native event use event.original
.)
If the .button
element should be being rendered straight away (i.e. it's not in a falsy section), and jQuery still can't find it after the initial render, then it means you've found an interesting bug... let us know!