jquery
2014-02-19 63 views 2 likes 
2

在我预先设置一个div后,我想提醒点击它,但我似乎无法应付它。我在这里有错字还是有另一个原因,为什么这不起作用?而登记为同一事件预先设置一个div,然后点击它将其删除

http://jsfiddle.net/K6EbM/1/

与类 .ansicht_gross
$(".newsbilder").click(function() { 
    var lbox = '<div class="ansicht_gross" style="height:100%; width:100%; background-color: green;">remove</div>'; 
    $("body").prepend(lbox); 
}); 

$(".ansicht_gross").click(function() { 
    alert(1); 
}); 

回答

2

你需要event delegation动态添加DOM elements.use:

$("body").on('click','.ansicht_gross',function() { 
    alert(1); 
}); 

Working Demo

2

元素将不可用。所以在这种情况下,您必须将事件委派给其最近的静态父代以使您的代码正常工作。这种过程被称为Event delegation

尝试,

$("body").on('click',".ansicht_gross",function() { 
    alert(1); 
}); 
2

您需要使用event delegation在这里,因为你的div已被动态补充说:

$('body').on('click', '.ansicht_gross', function() { 
    alert(1); 
}); 

这将有助于你绑定click事件到新增加的.ansicht_gross div。

Fiddle Demo

1

使用上。

$(".newsbilder").click(function() { 
    var lbox = '<div class="ansicht_gross" style="height:100%; width:100%; background-color: green;">alert on click</div>'; 
    $("body").prepend(lbox); 
}); 

$('body').on('click',".ansicht_gross", function() { 
    alert("1"); 
}); 

DEMO

2

你也可以这样做:

$('.newsbilder').click(function() { 
    var lbox = $('<div /* attributes */>alert on click</div>'); 
    $("body").prepend(lbox); 
    lbox.click(function() { 
     alert(1); 
    }); 
}); 

值得一提的是,事件代表团导致它们不一定需要额外的操作,也就是说,只要你单击BODY元素,jQuery浏览被点击的孩子的祖先,以便检查它们中的任何一个是否匹配传递的选择器,正如它发生的那样,'.ansicht_gross'。想象一下,一个脾气暴躁的用户在应用程序中的任何地方开始点击的速度都很快...... = D好吧,这有点扭曲,但请记住,有更多的选择器需要检查,越多的比较去表演。所以,需要谨慎使用。

延伸阅读:Are there any drawbacks to listen events on document level in jQuery?

相关问题