on和bind不工作但委托工作

时间:2014-04-09 06:29:53

标签: jquery

有没有人知道为什么我的代码“委托”功能有效而不是“开启”或“绑定”?

Fiddle

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

由于

4 个答案:

答案 0 :(得分:2)

您目前使用的内容适用于 .delegate() .on() 的正确参数顺序为:

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

因此您需要先指定事件,然后按照选择器进行操作:

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

<强> Fiddle Demo

答案 1 :(得分:2)

尝试

$(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
  });
});

“自jQuery 1.7起,.delegate()方法已取代.on()。”

“从jQuery 1.7开始,.on()方法提供了附加事件处理程序所需的所有功能。”

  • 使用.bind()方法非常昂贵,因为它附带相同的方法    事件处理程序到选择器中匹配的每个项目。

    您应该停止使用.live()方法,因为它已被弃用并具有    很多问题。

    .delegate()方法给了很多“砰然作响”    处理性能并对动态添加的元素做出反应。

    新的.on()方法主要是可以模仿的语法糖    .bind().live().delegate()取决于您的称呼方式。

    新方向是使用新的.on方法。熟悉    语法并开始在所有jQuery 1.7+项目中使用它。

Reference

答案 2 :(得分:0)

Event type必须是.on()声明

中的第一个参数

selector必须是第二个参数。

data必须是第三个参数及其可选

而不是

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

使用

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

Fiddle

答案 3 :(得分:0)

而不是使用$('div').on('click','p',function...使用$('div p').on('click',function...

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

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