<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").html("<p class='test'>click me</p>")
});
$(".test").click(function(){
alert();
});
});
</script>
</head>
<body>
<h2></h2>
<button>generate new element</button>
</body>
</html>
我试图生成类名称的新标签test中<h2>单击按钮.我还定义了一个与之关联的点击事件test.但事件不起作用.
有人可以帮忙吗？
Cᴏʀ*_*ᴏʀʏ 661
click()您正在使用的绑定称为"直接"绑定,它只将处理程序附加到已存在的元素.它不会受到将来创建的元素的约束.为此,您必须使用创建"委托"绑定on().
委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.
这是你要找的东西:
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>以上适用于使用jQuery 1.7+版本的用户.如果您使用的是旧版本,请参阅下面的上一个答案.
上一个答案:
尝试使用live():
$("button").click(function(){
$("h2").html("<p class='test'>click me</p>")
});
$(".test").live('click', function(){
alert('you clicked me!');
});
为我工作.用jsFiddle 试了一下.
或者有一种新的方式delegate():
$("h2").delegate("p", "click", function(){
alert('you clicked me again!');
});
Rok*_*jan 209
$('#staticParent').on('click', '.dynamicElement', function() {
// Do something on an existent or future .dynamicElement
});
该.on()方法允许您将任何所需的事件处理程序委托给:以后添加到DOM的
当前元素或 将来的元素.
PS:不要用.live()!从jQuery 1.7+开始,该.live()方法已被弃用.
Pra*_*ran 95
原因:
在jQuery中,Click() - 仅当元素已存在于html代码中时才附加事件处理程序.
它不会考虑页面加载后动态创建的新元素(Future元素).
动态元素是在javascript或jquery(不是html)的帮助下创建的.
因此点击事件不会触发.
方案:
要克服这一点,我们应该使用on() 函数.
delegate(),live()和on()函数优于DOM元素.
on可以触发现有元素以及未来元素.
on可以考虑整个页面中存在的元素.
不推荐使用delegate(),live()函数(不要使用这些函数).
您应该使用on函数来触发动态创建(未来)元素上的事件.
从$(document).ready中删除代码:
$(".test").click(function(){
alert();
});
变成:
$(document).on('click','.test',function(){
alert('Clicked');
});
Abh*_*hek 19
在js文件中添加此功能. 它适用于每个浏览器
$(function() {
$(document).on("click", '#mydiv', function() {
alert("You have just clicked on ");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>qwe*_*ymk 13
更改
$(".test").click(function(){
至
$(".test").live('click', function(){
amu*_*rra 12
你需要使用.live来实现这个目的:
$(".test").live("click", function(){
alert();
});
或者如果你使用jquery 1.7+使用.on:
$(".test").on("click", "p", function(){
alert();
});
试试.live()或.delegate()
http://api.jquery.com/delegate/
您的.test元素是在.click()方法之后添加的,因此它没有附加事件.Live和Delegate将该事件触发器发送给检查其子项的父元素,因此之后添加的任何内容仍然有效.我认为Live会检查整个文档正文,而Delegate可以被赋予一个元素,因此Delegate更有效率.
更多信息:
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
小智 6
我在jQuery的文档中找到了两个解决方案:
第一:在Body或Document上使用委托
例如:
$("body").delegate('.test', 'click', function(){
...
alert('test');
});
为什么？
答案:根据一组特定的根元素,为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序.链接:http://api.jquery.com/delegate/
第二步:将您的函数放在"$(document)",使用"on"并将其附加到要触发它的元素.第一个参数是"事件处理程序",第二个参数是元素,第三个参数是函数.例如:
$( document ).on( 'click', '.test', function () {
...
alert('test');
});
为什么？
答案: 事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时的页面上.要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者,使用委托事件附加事件处理程序,如下所述...链接:https://api.jquery.com/on/
另一种更简洁的替代方案（恕我直言）是使用原始 JavaScript 函数来响应单击事件，然后根据需要将目标元素传递回 jQuery。这种方法的优点是您可以在任何地方动态添加元素，并且单击处理程序将“正常工作”，并且您无需关心将控制权委派给父元素等等。
第 1 步：更新动态 html 以触发 onclick 事件。确保将“事件”对象作为参数传递
$(“按钮”).click(函数() {
$("h2").html("<p class='test' onclick='test(event)' > 点击我 </p>")
});
步骤2：创建测试函数来响应点击事件
功能测试(e){
警报（）;
});
可选步骤 3：假设您使用的是 jQuery，我假设获取对源按钮的引用会很有用
功能测试(e){
警报（）;
// 获取按钮的引用
// 该行的解释可以在这里找到
var 目标 = (e.目标)? e.target : e.srcElement;
// 将按钮引用传递给 jQuery 来执行 jQuery 魔法
var $btn = $(目标);
});
小智 5
使用委派在动态生成的内容上应用事件的最佳方法.
$(document).on("eventname","selector",function(){
// code goes here
});
所以你的代码现在就像这样
$(document).on("click",".test",function(){
// code goes here
});
| 归档时间： |
|
| 查看次数： |
492442 次 |
| 最近记录： |