返回值:jQuerydelegate(selector, eventType, handler(eventObject))

为所有与选择器匹配的元素的一个或多个事件添加事件处理。基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

从 jQuery 1.7 开始，.delegate() 已经被 .on() 方法所取代。然而，对于早期的版本，该方法依然是进行事件代理最有效的方法。更多关于事件绑定和代理的方法，请参阅 .on() 方法。一般来说，这两种方法是等价的： 

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+

例如，有如下关于 .delegate() 的代码： 

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

它等价于如下 .on() 方法： 

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

若要移除通过 delegate() 绑定的事件，请使用 .undelegate() 方法。

传递并处理 event data 的方式与 .on() 是相同的。

补充说明:

  • 因为 .live() 事件一旦被传播到文档顶部，就不可能再阻止 live 事件的传播。类似的，通过 .delegate() 执行的事件，也会传播到调用它们的元素上。同时，任何在 DOM 树中，比这些元素低的元素上绑定的相同事件，在 .delegate() 事件被调用的时候，也会被触发。因此，如果要在事件中阻止委托事件被触发，可以通过调用 event.stopPropagation() 方法，或返回 false 的方式来实现。

示例:

点击段落时，添加另一个段落。注意，.delegate() 会为所有的段落(包括新生成的段落)绑定事件。

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Click me!</p>

  <span></span>

<script>


    $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });


</script>
</body>
</html>

演示:

示例:

点击段落时，显示该段落的内容：

jQuery 代码:
$("body").delegate("p", "click", function(){
  alert( $(this).text() );
});

示例:

通过返回 false 的方法，取消默认的动作，并阻止事件向上冒泡：

jQuery 代码:
$("body").delegate("a", "click", function() { return false; })

示例:

通过使用 preventDefault 方法仅取消默认的动作。

jQuery 代码:
$("body").delegate("a", "click", function(event){
  event.preventDefault();
});

示例:

还可以绑定自定义事件。

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; }
  span { color:blue; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>

<script>



    $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $(this).text("Hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent");
    });



</script>
</body>
</html>

演示: