Question

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

在我的代码中，点击链接上的点击功能＆＃39;点击＆＃39;不起作用。我无法弄清楚这个问题。我将不胜感激任何帮助。

请检查JsFiddle以查看问题。

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>

Answer 1

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

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

Updated fiddle

Answer 2

使用.on

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

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

参见 demo

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

只需添加委派

Answer 6

使用

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

OR

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);
});

附加链接上的单击功能不起作用

6 个答案: