Question

如何创建问题：

点击现有的触发链接 - 发生了一些事情（通过）
点击“添加触发器”按钮，该按钮附加一个具有相同类
点击新创建的链接，它与开始时存在的前2个链接（失败）不同。

以下是我的示例 - ：http://jsbin.com/equjig/3/edit

我认为.on('click', func)函数适用于向dom中的当前元素添加事件，还有将来添加到dom的元素？

这是我目前的javascript：

$(document).ready(function() {
  $(".link").on('click', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
  });

  $("#b1").on('click', function() {
    $("#p1").append("<a href='#' class='link'>new trigger</a>");
  });

这是HTML

<button type="button" id="b1">add trigger</button>
  <p id="p1">
    <a href="#" class="link">trigger 1</a>
    <a href="#" class="link">trigger 2</a>
  </p>
  <div id="out"></div>

注意 - 即时通讯使用jQuery 1.7

谢谢！

Answer 1

你几乎就在......

工作示例：http://jsbin.com/equjig/6/edit

$(document).ready(function() {
    $('#p1').on('click','.link', function(e) {
        e.preventDefault();
        $("#out").append("clicked<br/>");
    });
});

这样做 - 您应该选择.link元素的父div（我在这里使用过$('#p1')，就像你的jsbin一样）

Answer 2

.on()也可以像.delegate()一样使用，如下所示：

//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1
$('#p1').on('click', '.link', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
});

以下是.on()的文档：http://api.jquery.com/on

Answer 3

根据on的api文档，签名.on('click', func)复制.bind的行为 - 也就是说，它会将监听器绑定到每个现有集合中的元素。

要获取.delegate行为 - 也就是说，要绑定到源自特定类型（子）元素的每个事件，请包含一个选择器：

$("parent-selector").on('click', 'your-selector', func)

Answer 4

您可以使用版本1.7中的.on()，除了提供语法之外，它还会在某种程度上取代旧版.live()。

使用.on()，您可以将事件委托给任何父元素，如下所示：

$(document.body).on('click','.link',function() {
    // handler for all present and future .link elements inside the body
});

这样，它也适用于在body体内添加了className“link”的未来元素。

我对你的lint做了一个小修改，它按照你期望的方式工作：http://jsbin.com/adepam。这是代码：

$(document).ready(function() {
  $(document.body).on('click', '.link', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
  });
  $("#b1").on('click', function() {
    $("#p1").append("<a href='#' class='link'>new trigger</a>");
  });
});

Answer 5

onclick事件仅适用于已存在的元素。您需要使用.live函数。

Answer 6

将.on（）更改为.live（）

$(document).ready(function() {
  $(".link").live('click', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
  });

  $("#b1").on('click', function() {
    $("#p1").append("<a href='#' class='link'>new trigger</a>");
  });
});

jquery .on（＆＃39; click＆＃39;，func）函数没有完成它的工作

6 个答案: