javascript jquery on mousedown 不适用于动态生成的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23226024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery on mousedown not working on dynamically generated elements
提问by Sarchophagi
So i'm trying to create a js/css "wave game" like tower defense ones. When all the pre-generated enemys from first wave are dead, it spawns the second wave and so on.
所以我正在尝试创建一个 js/css“波浪游戏”，比如塔防游戏。当第一波中所有预先生成的敌人都死亡时，它会生成第二波，依此类推。
So far so good. The problem is that i just can't attack mobs dynamically spawned within second wave.
到现在为止还挺好。问题是我无法攻击在第二波中动态生成的怪物。
I used to try .live() in similar cases, but its deprecated, so i'm trying .on(), as instructed
我曾经在类似的情况下尝试过 .live()，但它已被弃用，所以我正在按照说明尝试 .on()
$('.enemy').on('mousedown' , function(event) {
//attack code
}
$('.enemy').on('mousedown' , function(event) {
//攻击代码
}
Its working fine for initial mobs (1st wave) but it still just not working on dynamic mobs (>= 2nd wave)
它对初始生物（第一波）工作正常，但它仍然不适用于动态生物（>=第二波）
Help, guys, please?
各位帮帮忙好吗？
回答by VVV
You need to specify an element that is already there when the DOM is created. In the parameters, you specify the elements you want to add the mousedown method. By simply assigning $('.enemy'), it will attach the method to those that are already present in the DOM.
您需要指定一个在创建 DOM 时已经存在的元素。在参数中，您指定要添加 mousedown 方法的元素。通过简单地赋值$('.enemy')，它会将方法附加到 DOM 中已经存在的方法。
$('body').on('mousedown', '.enemy', function(event) {
//attack code
}
As Wex mentioned in the comments, instead of writting $('body')you should use the container's name (the container which wraps the .enemyelements. This way, when a .enemyelement is added, the event doesn't need to bubble all the way up to the bodytag.
正如 Wex 在评论中提到的那样，$('body')您应该使用容器的名称（包装.enemy元素的容器）而不是写作。这样，当.enemy添加元素时，事件不需要一直冒泡到body标签。
回答by danieltmbr
The binding '.on()' works only with the content that created earlier then the script ran. So one solution could be you bind the event to the parent element.
绑定“.on()”仅适用于脚本运行之前创建的内容。因此，一种解决方案可能是将事件绑定到父元素。
$('.PARENT_ELEMENT').on('mousedown', '.enemy', function(event){
// your code here
}
That should do it.
那应该这样做。
回答by Joseph
I made this google like drop down suggestions search box and I faced a problem similar to yours where there was suggestions disappearing before the re-direct happened. I overcame it by using and modifing vyx.ca answer:
我制作了这个类似 google 的下拉建议搜索框，但我遇到了与您类似的问题，在重定向发生之前，建议消失了。我通过使用和修改 vyx.ca 答案克服了它：
var mousedownHappened = false;
var clicked_link;
$("#search-box").blur(function(e) {
if (mousedownHappened)// cancel the blur event
{
mousedownHappened = false;
window.location.href = clicked_link;
} else {
// no link was clicked just remove the suggestions box if exists
if ($('#search-btn').next().hasClass('suggestions')) {
$(".suggestions").remove();
}
}
});
//attaching the event to the document is better
$(document).on('mousedown', '.suggestions a', function() {
clicked_link= $(this).attr('href');
mousedownHappened = true;
});
