14

Can anyone tell me why this code would not be working?

$('body').on('test', function() {
  alert('test');
});

$('body').trigger('test');

I'm using jquery-1.7.2.min. I do not get any errors, just nothing happens.

I've tried putting the code inside an inline script, inside a $(document).ready() and still nothing. I've also tried both on() and bind() and neither result. I see examples all over showing the same syntax, so what is different with this?

iamface
  • 673
  • 1
  • 9
  • 27
  • It's just working fine check here, http://jsfiddle.net/joycse06/XXXhQ/ – Prasenjit Kumar Nag Jun 04 '12 at 17:04
  • yeah your syntax works with the custom event – mprabhat Jun 04 '12 at 17:07
  • Odd.. These examples all work, but it doesn't in my page. I just updated my jQuery from 1.6.4 to 1.7.2 this morning, maybe there's some cache issue on my server? I understand `on()` wasn't implemented until 1.7 – iamface Jun 04 '12 at 17:11
  • 1
    alert(jQuery.fn.jquery); will check your version, or alert(typeof jQuery.fn.on); to confirm the function exists. – Jeff Jun 04 '12 at 17:32
  • I'll add for my instance, make sure you dont have jquery included twice (the jquery object when the `.on` is registered needs to be the same jquery object (i.e. `$`) when `.trigger` is called otherwise if another `$` instance is loaded later it will pretty much erase the original callbacks that were set when the first `$` jquery object was used. the old/original jquery object will be removed and the new one (`$`) will take the place of the first (and the event listeners will be gone) – Coty Embry Mar 22 '18 at 16:02

2 Answers2

8

It appears the issue lies in the DOM being ready somehow. Placing the code within inline script would not work. Placing it inside of a $(document).ready() will work with an anonymous function, but for some reason not a function call with '( )'.. This code worked

$(document).ready(start);
function start(){
$('body').on('test', function() {
  alert('test');
});

$('body').trigger('test');
}

But this did not... *notice the function call parenthesis.

$(document).ready(start());
function start(){
$('body').on('test', function() {
  alert('test');
});

$('body').trigger('test');
}

An exact example works both ways on jsfiddle, but for some reason only one way works on my server. Which I guess bring up another question of why, but at least we can see this code does in fact work, there is some strange anomaly with my stuff :/

Legionar
  • 7,472
  • 2
  • 41
  • 70
iamface
  • 673
  • 1
  • 9
  • 27
  • 10
    That's because your semantically incorrect. start() will pass the return value of your start function. Whereas start will pass the function to be executed when the document is ready. Typically, people pass anonymous functions: $(function() {/*my stuff here*/}); – Jeff Jun 04 '12 at 19:31
  • Thanks this worked for me too. Adding document ready around the "on" declaration worked! – rf_wilson Jul 11 '13 at 08:25
2

Try delegation:

$(document).on('test', 'body', function() {
  alert('test');
});

$('body').trigger('test');

This works like live() used to. http://api.jquery.com/live/

Jeff
  • 846
  • 8
  • 13
  • you code don't reflect what OP wants. OP's issue is not delegate but custom event – thecodeparadox Jun 04 '12 at 17:10
  • 1
    This is a custom event, and you are right his code SHOULD work, I just know from experience sometimes it is easier to bind events in this manner (even custom events) rather than direct binding. From the docs: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). Of course body should exist, but something weird is happening in their situation we can't see, this would overcome that. (In theory). ;) – Jeff Jun 04 '12 at 17:13