Blaze Events with "Complex" Selectors

Hello everybody
Any idea how we can bind an event to a complex selector with Blaze?

Template.name.events({
    'click .container input'(event, instance) { /* does not work */ }
});

if I bind the event with jquery, it works. But with blaze is just ignored.
Any ideas?

The problem may not be Blaze. Have you tried creating an event handler in the console with jQuery and checking if that works?

$('.container input').click(function () { alert('Clicked!'); });

If that doesn’t work, then either your selector is not specific enough, or the click event is being triggered on an ancestor or child element. Can you paste an HTML snippet of one of the inputs you’re trying to capture click events for?

Yes, i’m doing it with jquery and works.

Can you paste the relevant part of your template?

Are you using explicit imports? If so, it’s possible you’ve imported the .html file but not the .js file. Are there other event handlers for that template that are working?

I’m not using any html import or special imports. Is just this selector is not working… Others are working, but as I said, if I do it with jquery it works
My question is, should it work?

Yes, it should work. I wouldn’t even call it a particularly complex selector. Which is why I’m thinking there must be a typo or something. If you post your template I’ll be happy to try it out locally to see if I can reproduce your problem.

<template name="test">
     <div class="wrapper">
          {{ > input }}
     </div>
</template>

<template name="input">
    <input type="radio"/>
</template>

When I try to bind it to the event ‘click .wrapper input’ it doesn’t work
It should be because its inside another template, but making it to ‘click input’ it works.

I see a potential click .wrapper input, but not click .container input.

Also, your template name is incorrect. It should be:

Template.input.events({
    'click .wrapper input'(event, instance) { /* does not work */ }
});

If that’s the structure, I think you need to add the event handler to the test template, not the input template.

This worked for me:

Template.test.events({                                                                                                        
  'click .wrapper input'() {                                                                                                  
    alert('test clicked');                                                                                                    
  }                                                                                                                           
});

I think Blaze may automatically scope event handlers somehow, and since the wrapper div doesn’t exist in the input template, you can’t bind events to it for that template.

This is exactly the case. Events on a template are scoped to that template so will only apply to that template and it’s children templates.

For your radio buttons I like to use the ‘change’ event rather than the click, that way it fires even if you are navigating with the keyboard

Sorry guys and thank you for everything. The problem was in a internal component i was using.
Thanks you all for your answers!

1 Like