2014-06-29 59 views
0

我做了下面的代码,以澄清一个问题:如何动态地在事件处理程序之外通过此事件处理程序创建的元素来追加元素?

HTML:

<body> 
<div class="static">This is a static div</div> 
<button class="add-dynamic-button">Click me to add a new button</button> 
</body> 

JS:

$(function(){ 
$('.add-dynamic-button').on("click",function(){ 
    $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>"); 
}); 
    $('.dynamic-button').on('click',function(){ 
     $('body').append("<div class='dynamic-div'>This is a dynamic div</div>"); 
}); 
}); 

而这里的jsfiddle测试:http://jsfiddle.net/6ZN5J/

当我有$('。dynamic-button')。on('click')处理程序在第一个点击处理程序中,.dynamic-div被添加好。 但是,当我把它放在第一个点击处理程序范围之外时(如上例),没有任何反应。我最初认为$ .on适用于任何尚未创建的DOM元素,但现在事实证明,如果它们已经在DOM中或$ .on被放置在内部,它就可以处理同一类或类型的新元素创建这些元素的函数。 你能否澄清为什么会发生这种情况,以及是否有任何方法允许在创建的处理程序之外的动态创建的元素上使用事件处理程序? 谢谢

回答

0

$()是一个选择器。它会在您执行此操作时查找文档中的元素或您正在执行整个查询的父元素。

如果您想了解更多的按钮势必click情况下,您需要手动将它们绑定:

$('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>") 
     .on("click", ....); 
相关问题