jQuery点击事件，附加内容后答案

【问题标题】：jQuery click event, after appending contentjQuery点击事件，附加内容后
【发布时间】：2017-04-26 00:27:19
【问题描述】：

想知道为什么下面的示例不起作用？

<a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        return false;
    });
    $('ul li a').click(function() {
        alert('Thank you for clicking');
        return false;
    });
});
</script>

【问题讨论】：

-1。我的问题被错误地否决了，因为提供的某些信息不正确，看起来好像我的答案完全不正确。
不需要天才就能发现我只发布了部分不起作用的代码。感谢您的意见。

标签： jquery

【解决方案1】：

因为在定义click 处理程序时您要附加的元素不存在，所以它们是动态创建的。要解决此问题，您可以使用 jQuery 中的 delegate() 方法。

$('ul').delegate('a','click',function() {
    // your code here ...
});

在线示例： http://jsfiddle.net/J5QJ9/

【讨论】：

正如 Bless Yahu 所说，最好使用委托，请参阅 nettuts 解释：net.tutsplus.com/tutorials/javascript-ajax/…
一些进一步的信息（我为狡猾的格式道歉）：旧的：$("#Item1").click(function(e) { 新的：$(document).delegate("#Item1", "click", function(e) { 更新的：$(document).on("click", "#Item", function(e) {
.live 已从 jQuery 版本 1.9 中删除，所以 .delegate 或 .on 是要走的路。
.on 对我不起作用，虽然我有 jQuery 1.11
感谢您的帮助:)

【解决方案2】：

从 jQuery 1.7 开始，您可以使用 .on() 处理程序将新创建的元素绑定到 'click' 事件：

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
            alert('thank you for clicking');
        });
    });
</script>

（这是原始示例）。

【讨论】：

【解决方案3】：

$(document).on('click','ul li a', function(){
      // Content Code
});

【讨论】：

【解决方案4】：

.live 自 1.7 起已弃用。试试这个（jquery 2.1.4）：

HTML：

<a id="load_list" href="#">Load the list</a>

<ul></ul>

JQuery:

$(document).ready(function() {

 $('#load_list').click(function() {
   $('ul').html("");    

   $("<li/>", {
        "class" : "someClass",
        text: "Click here",
        click: function() {
          alert($(this).text());
        }
      }).appendTo('ul');
  });
});

或类似的东西（但我没有找到如何将点击附加到锚点）：

$(document).ready(function() {
 $('#load_list').click(function() {
   $('ul').html("");

   $('<li><a href="#">Click here</a></li>').on({
      click: function() {
        alert("hoi");
      }
    }).appendTo("ul");
 });
});

【讨论】：

【解决方案5】：

因为你是在元素被放置在你需要使用的 dom 之前应用点击事件.live()

【讨论】：

【解决方案6】：

试试这个新代码，它会删除旧元素的现有点击事件，然后为新旧元素再次添加它们。

<a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        $('ul li a').unbind('click', thanks());//Remove existing binds
        $('ul li a').bind('click', thanks());//Remove existing binds
        return false;
    });
    function thanks() {
        alert('Thank you for clicking');
        return false;
    });
    $('ul li a').bind('click', thanks());
});
</script>

【讨论】：

感谢您的反对意见。 :/ 我用 cmets 给出了正确的新代码。
可能是因为这可能是最痛苦的方式。