2

This is a somewhat constructed question, which should hopefully teach me do write more maintainable jQuery.

I have a button, which should slideToggle another element.

I know I can do like this:

$('.button').click(function(){
  $('.other-element').slideToggle();
});

However, I would like to just fire an event when clicking the .button, and then 'catch' the event on the .other-element. I thought I would be able to do like this:

$('.button').click(function(){
  $(this).trigger('customEvent');
});

$('.other-element').on('customEvent', function() {
  $(this).slideToggle();
});

This ofc results in more code, and in this specific example, its probably not a good idea, but I like the division between event firing and catching.

How do I do this the right way?

tolborg
  • 612
  • 4
  • 21
  • the idea behind what you're doing is fine. be sure to understand the `this` keyword based on the context that you have (i.e. look at @mojtaba's answer) as well as the nuances around `trigger` vs `triggerHandler`, and use whichever is appropriate as per your requirements: http://stackoverflow.com/questions/3772537/triggerhandler-vs-trigger-in-jquery – Nirvana Tikku May 11 '13 at 15:22

2 Answers2

1

Are you looking for this?

$('.button').click(function(){
  $('.other-element').trigger('customEvent');
});

$('.other-element').on('customEvent', function() {
  $(this).slideToggle();
});
rahul maindargi
  • 5,359
  • 2
  • 16
  • 23
  • I guess this is the only way to do it. I was hoping to not have to define .other-element inside the click. – tolborg May 11 '13 at 15:59
  • @tolborg if you want to decide elements to trigger custom element at runtime... its possible but you need to tell us on what criteria you want it to decide (Like something selected in select box?) – rahul maindargi May 11 '13 at 18:36
0

You need to trigger the customEvent for your .other-element element, not the button:

$('.button').on('click', function(){
    $('.other-element').trigger('customEvent');
});
  • 1
    A couple of seconds quicker than me... so let me just add [this fiddle](http://jsfiddle.net/Derija93/3Zhux/). – Kiruse May 11 '13 at 15:23
  • Sure, but this does not really decouple the event firing and the 'catching' (please give me a better word to use!) – tolborg May 11 '13 at 15:25
  • @tolborg Sorry dude, I don't understand what exactly you want. Maybe you can explain it in some other way. –  May 11 '13 at 15:28
  • The reason why I write that the solution does not decouple, is that .other-element is still defined within the click. I guess I just want to fire an event 'out there', and then - some where else in my code - have elements pick up the event. – tolborg May 11 '13 at 15:31
  • Meaning if I want to attach a new reaction to the customEvent, I just write another .on(). – tolborg May 11 '13 at 15:32
  • I could write: $('.button').on('click', function(){ $('.target-element').trigger('customEvent'); }); $('.target-element.element-1').on('customEvent', function() { $(this).doSomeStuff(); }); $('.target-element.element-2').on('customEvent', function() { $(this).doOtherStuff(); }); Then add the class 'target-element' to all the elements which should react to the 'customEvent'. (please note that all class and event names are generic for the sake of example) – tolborg May 11 '13 at 15:37