0

Does anyone know why in my code "delegate" function works but not "on" or "bind"?

Fiddle

$(document).ready(function(){
  $("div").on("p","click",function(){
    $("p").css("background-color","pink");
  });
});

Thanks

4 Answers4

2

What you're currently using is applicable for .delegate() . The correct parameters order for .on() is:

.on( events [, selector ] [, data ], handler(eventObject) )

so you need to specify the event first then follow by your selector:

$("div").on("click","p",function(){
    $("p").css("background-color","pink");
});

Fiddle Demo

Felix
  • 37,892
  • 8
  • 43
  • 55
  • Thanks for the answer, so we can use either of them (delegate, on ,bind and live?) for event delegation; are there any technical differences between them for event delegation? –  Apr 09 '14 at 06:39
  • 1
    You can check here mate: http://stackoverflow.com/questions/8359085/delegate-vs-on – Felix Apr 09 '14 at 06:51
2

Try

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).css("background-color","pink"); // this will change color on inside p
  });
});

DEMO

$(document).ready(function(){
  $("div").on("click","p",function(){
    $('p').css("background-color","pink"); // this will change color on all p
  });
});

"As of jQuery 1.7, .delegate() has been superseded by the .on() method."

"As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers."

  • Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector.

    You should stop using the .live() method as it is deprecated and has a lot of problems with it.

    The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements.

    That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.

    The new direction is to use the new .on method. Get familiar with the syntax and start using it on all your jQuery 1.7+ projects.

Reference

Sridhar R
  • 20,190
  • 6
  • 38
  • 35
  • Thanks for the answer, so we can use either of them (delegate, on ,bind and live?) for event delegation; are there any technical differences between them for event delegation? –  Apr 09 '14 at 06:43
0

Event type must be first parameter in .on() statement

selector must be second parameter.

data must be third parameter and its optional

Instead of 

 $("div").on("p","click",function(){ 
       $("p").css("background-color","pink");
 });

use

 $("div").on("click","p",function(){ 
      $("p").css("background-color","pink");
 });

Fiddle

Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
  • Thanks for the answer, so we can use either of them (delegate, on ,bind and live?) for event delegation; are there any technical differences between them for event delegation? –  Apr 09 '14 at 06:47
0

Instead of using $('div').on('click','p',function... use $('div p').on('click',function...

http://jsfiddle.net/UPNaF/4/

$(document).ready(function(){
  $("div p").on("click",function(){
    $(this).css("background-color","pink");
  });
});
Spedwards
  • 4,167
  • 16
  • 49
  • 106