Question

示例1

HTML

<a class="datafile" href="#">abc</a>
<div id="result2">
</div>

的Javascript

$(".datafile").click(function() {
$('#result2').append('ABC');   
});

示例2

HTML

<input id="button" type="button" value="Click!"></input>
<div id="result2">
</div>

的Javascript

$("#button").click(function(){
$('#result2').append('<a class="datafile" href="#">abc</a>')
});
$(".datafile").click(function() {
$('#result2').append('ABC');   
});

在示例1中，点击abc会在ABC代码中添加div，而在示例2中，点击按钮会在a内插入div代码，但之后单击abc时，ABC标记中不会附加div。

为什么示例2 ABC没有被追加？我怎样才能做到这一点？

Example 2 on JSFiddle

修改

使用on有效，但在这种情况下，如何获取属性，特定于已点击的链接的属性？

Answer 1

代码$(".datafile").click(...)仅将事件处理程序附加到现有元素。要获取新元素的事件，您需要在添加元素后添加新的事件处理程序，或者需要将单个事件处理程序添加到公共父元素，而不是body元素。为此，请使用jQuery on()函数的selector参数，如下所示：

$("body").on("click", ".datafile", function () { /* ... */ });

这将使用类datafile catch。

捕获当前和未来元素的所有事件

可以使用$(this)访问生成事件的元素，即单击的元素。有关详细信息，请参阅http://api.jquery.com/on/。

Answer 2

试试这个

 $("#button").click(function(){ 
 $('#result2').append('<a class="datafile" href="#">abc</a>')
  });  

 $("body").on('click','.datafile',function() {
 $('#result2').append('Loading Log File ...'); 
 // get value of href
 alert($(this).text());  
 });

您正在创建元素，因此您需要使用.on jquery函数

Answer 3

这就是你想要实现的目标

```

$("#button").click(function(){
 $('#result2').append('<a class="datafile" href="#">abc</a>')
});
$("#result2").click(function() {
 $(this).append('Loading Log File ...');   
});

```

请记住，您可以将最后一个.append更改为.html，以使用加载日志文件替换abc ...

Answer 4

发现这个工作：

$(document).on('click', ".datafile", function () {
    $('#result2').append('<p>Loading Log File ...</p>');
});

<强> FIDDLE

Answer 5

TAS很好地解释了为什么它不起作用。除了on（）之外，您还可以使用live（）方法：

$("#button").click(function(){
$('#result2').append('<a class="datafile" href="#">abc</a>')
});
$( ".datafile" ).live( "click", function() {
  $('#result2').append('Loading Log File ...'); });

Jquery单击事件不适用于生成的标记

5 个答案: