3

单击链接时，我想显示一个 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>
4

6 回答 6

11

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

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

更新的小提琴

于 2013-10-23T10:06:10.237 回答
3

使用.on

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

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

看演示

于 2013-10-23T10:05:54.607 回答
1

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

$('#myDiv').on('click', '.link', function(e){
    alert("clicked");
});
于 2013-10-23T10:08:59.030 回答
1

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

$('.big-link').click(function(e){
    $('#myDiv').append(
       $('<a/>' { 
           'class' : 'link' ,
           'href'  : '#' , 
           'click' : function(){ alert  ( 'hi' ); }
       } )
     );
于 2013-10-23T10:12:10.423 回答
0

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

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

只需添加代表团

于 2013-10-23T10:08:46.810 回答
0

采用

$('#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);
});
于 2013-10-23T10:08:53.280 回答