单击新添加的链接不执行 javascript 功能答案

【问题标题】：clicking on newly added links don't execute javascript function单击新添加的链接不执行 javascript 功能
【发布时间】：2012-08-18 22:22:36
【问题描述】：

在试验 jquery 时，我创建了这个 html 和 javascript。

<body>
<div id="results">
<div class="mylinkdiv">
<a class="mylinkclass" href="#">8</a>
: This is supposed to be a toaster.
<br>
<a class="mylinkclass" href="#">14</a>
: with a toaster maybe.
<br>
<a class="mylinkclass" href="#">51</a>
: If we're really creative.
<br>

</div>
</div>
<button id="remove" type="button" > Remove</button>
<button id="add" type="button" > Add</button>

</body>

javascript具有弹出包含链接文本的消息的功能。它还具有向div添加一些链接的功能。名为remove的函数删除内部div。

$(document).ready(function(){
    $('.mylinkclass').click(function(){
           getLinkText(this);
        });

    $('#remove').click(function(){
           removeContents();
        });

     $('#add').click(function(){
           addContents();
        });
});

function getLinkText(that){
    var txt = $(that).text();
    var num = parseInt(txt);
    alert('num='+num);
    return false;
}

function addContents(){
  $('#results').append('<a class="mylinkclass" href="#">70</a>  new line1 <br>');
  $('#results').append('<a class="mylinkclass" href="#">77</a> new line2<br>');
}

function removeContents(){
  $('.mylinkdiv').remove();      
}

当我点击原始html页面中的链接（即3个链接）时，弹出警告框。

当我单击添加按钮时，它会在 div 中添加两个新链接。但是，当我单击这些新添加的链接时，不会弹出警报！

我不明白为什么..有人可以告诉我吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您使用的是 jQuery 1.7，请使用 .on；如果您使用的是 jQuery 1.6，请使用 .delegate

jQuery('#results').on('click','.mylinkclass',function() {
    getLinkText(this);
});

Demo

另一种方法是克隆现有元素Demo

var cloned = jQuery('.mylinkclass:last').clone(true);
jQuery('#results').append(cloned);

在第二种情况下，事件监听器也将被复制，您不需要使用 .on 或 .delegate。

【讨论】：

【解决方案2】：

您需要一个 delegate 事件处理程序，因为您的项目是在 dom 加载后动态创建的。

$('#results').on('click', '.mylinkclass', function() {
    getLinkText(this);
});

【讨论】：

从技术上讲，这不是.live-style，而是.delegate()-style。

【解决方案3】：

当您在第一次加载页面后添加到 DOM 的链接时，链接不会绑定到 jQuery 事件。你应该使用：

$(document).on('click', '.mylinkclass', function() {

});

当我第一次遇到这个问题时，我正在使用“live()”，但你不应该使用它，因为根据 jQuery 文档它已被弃用。

【讨论】：

【解决方案4】：

你必须这样做：

$ ('. mylinkclass'). live ('click', function () {
alert ('OK')
});

【讨论】：