附加链接上的单击功能不起作用[重复]答案

【问题标题】：Click function on appended link does not work [duplicate]附加链接上的单击功能不起作用[重复]
【发布时间】：2013-10-23 10:04:25
【问题描述】：

单击链接时，我想显示一个 div 并在该 div 中附加另一个链接。然后我想在附加的链接上使用点击功能。

在我下面的代码中，“点击”链接上的点击功能不起作用。我无法弄清楚问题所在。我将不胜感激任何帮助。

请检查 JsFiddle 以查看问题。

演示： http://jsfiddle.net/QYL3x/

jQuery：

$('.big-link').click(function(e){
    $('#myDiv').append('<a class="link" href="#">Click</a>');
});


$('.link').click(function(e){
    alert("clicked");
});

HTML：

<a href="#" class="big-link" data-reveal-id="myDiv">Fade</a>
<div id="myDiv" class="reveal-modal"></div>

【问题讨论】：

使用 $('.link').live('click',function(){}) 或 $('.link').on('click',function(){}) ; YourFiddle
当浏览器解析和运行 JavaScript 文件时，.click() 事件绑定已经被执行。它没有找到您的 .link 元素，因为它还不存在。您需要更改 .link 元素绑定的工作方式 - 请参阅 .on()
@AliExalter .live() 在 jQuery 1.9 中被删除
和Event binding on dynamically created elements?
@andyb 我知道但他在小提琴中使用 1.8.3。对于 1.9 使用 .on() 这里是 1.9 示例的链接 jSFiddle1.9

标签： javascript jquery html

【解决方案1】：

您需要使用委托的事件处理程序。这是因为您当前的代码试图在 .link 存在于 DOM 之前将其附加到它。

$('#myDiv').on('click', '.link', function(e){
    alert("clicked");
});

Updated fiddle

【讨论】：

【解决方案2】：

使用.on

.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。

$("#myDiv").on('click','.link',function(e){
    alert("clicked");
});

见demo

【讨论】：

错误的语法和错误的选择器...
感谢关注@GabyakaG.Petrioli

【解决方案3】：

jQuery.click 函数绑定到 DOM 中存在的元素。您需要添加一个委托事件监听器：

$('#myDiv').on('click', '.link', function(e){
    alert("clicked");
});

【讨论】：

【解决方案4】：

Rory 的解决方案非常完美。此外，我通常使用另一种变体，不需要委托。这是在创建元素时绑定事件。

$('.big-link').click(function(e){
    $('#myDiv').append(
       $('<a/>' { 
           'class' : 'link' ,
           'href'  : '#' , 
           'click' : function(){ alert  ( 'hi' ); }
       } )
     );

【讨论】：

【解决方案5】：

工作样本：http://jsfiddle.net/QYL3x/1/

$('#myDiv').on('click','.link',function(e){
     alert("clicked");
});

只需添加委托

【讨论】：

【解决方案6】：

使用

$('#myDiv').on('click', '.link', function(e){
    alert("clicked");
});

或

http://jsfiddle.net/QYL3x/2/

$('.big-link').click(function(e){
    var link = $('<a class="link" href="#">Click</a>');
    link.click(function(e){
        alert("clicked");
    });
    $('#myDiv').append(link);
});

【讨论】：