jquery .on('click'， func) 函数没有完成它的工作

Question

如何创建问题:

1. 点击现有的触发链接-发生某事(通过)
2. 点击"添加触发器"按钮，这将添加一个新的触发器链接/相同的类
3. 点击新创建的链接，它不做同样的事情，从一开始就存在的前两个链接(失败)

下面是我的例子-: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
});

这样，它也将适用于将来添加到具有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

改变。().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>");
  });
});