Jes*_*sen 123 javascript jquery bind
我想将onclick事件绑定到我使用jQuery动态插入的元素
但它永远不会运行绑定功能.如果你能指出为什么这个例子不起作用以及如何让它正常运行,我会很高兴:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $('<a class="" href="#">Click here to see an alert</a>');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>编辑:我编辑了示例,包含插入方法的两个元素.在这种情况下,alert()永远不会执行调用.(感谢@Daff在评论中指出这一点)
小智 282
所有这些方法都已弃用.您应该使用该on方法来解决您的问题.
如果要定位动态添加的元素,则必须使用
$(document).on('click', selector-to-your-element , function() {
//code here ....
});
这取代了已弃用的.live()方法.
Tob*_*ias 60
第一个问题是当你在一个带有多个元素的jQuery集上调用append时,会为每个元素创建一个要追加的元素的克隆,因此附加的事件观察者会丢失.
另一种方法是为每个元素创建链接:
function handler() { alert('hello'); }
$('.add_to_this').append(function() {
return $('<a>Click here</a>').click(handler);
})
另一个潜在的问题可能是在将元素添加到DOM之前附加事件观察者.我不确定这是否有什么要说的,但我认为这种行为可能被认为是不确定的.一个更可靠的方法可能是:
function handler() { alert('hello'); }
$('.add_to_this').each(function() {
var link = $('<a>Click here</a>');
$(this).append(link);
link.click(handler);
});
小智 51
Live方法怎么样？
$('.add_to_this a').live('click', function() {
alert('hello from binded function call');
});
不过,你所做的事情看起来应该有效.还有一篇看起来非常相似的帖子.
MrC*_*ode 18
派对有点晚,但我想我会尝试清除jQuery事件处理程序中的一些常见误解.从jQuery 1.7开始,.on()应该使用而不是弃用的.live(),将事件处理程序委托给在分配事件处理程序后的任何时刻动态创建的元素.
也就是说,它不是一个简单的切换live,on因为语法略有不同:
新方法(例1):
$(document).on('click', '#someting', function(){
});
不推荐使用的方法(例2):
$('#something').live(function(){
});
如上所示,存在差异.通过将选择器传递给jQuery函数本身,.on()实际上可以调用twist .live():
例3:
$('#something').on('click', function(){
});
但是,如果不使用$(document)示例1,示例3将不适用于动态创建的元素.如果您不需要动态委派,示例3绝对没问题.
应该将$(document).on()用于一切吗？
它可以工作,但是如果你不需要动态委托,那么使用例3会更合适,因为示例1需要从浏览器稍微多做一些工作.对性能没有任何实际影响,但使用最合适的方法是有意义的.
如果不需要动态委派,是否应该使用.on()而不是.click()？
不必要.以下只是示例3的快捷方式:
$('#something').click(function(){
});
以上内容完全有效,因此在不需要动态委派时使用哪种方法实际上是个人偏好的问题.
参考文献: