Question

所以我正在尝试创建像塔防一样的js / css“wave游戏”。当第一波中所有预先产生的敌人都死亡时，它会产生第二波，依此类推。

到目前为止一切顺利。问题是我无法攻击在第二波内动态生成的怪物。

我曾经在类似的情况下尝试.live（），但是它已被弃用了，所以我正按照指示尝试.on（）

$（'。enemy'）。on（'mousedown'，function（event）{


//攻击代码


}

它适用于初始怪物（第一波），但它仍然没有处理动态怪物（＆gt; =第二波）

帮助，伙计们，拜托？

Answer 1

创建DOM时，您需要指定已存在的元素。在参数中，指定要添加mousedown方法的元素。只需指定$('.enemy')，它就会将方法附加到DOM中已存在的方法。

$('body').on('mousedown', '.enemy', function(event) {

    //attack code

}

正如Wex在评论中提到的，您应该使用容器的名称（包装$('body')元素的容器而不是写.enemy。这样，当添加.enemy元素时，事件不需要一直冒泡到body标记。

Answer 2

绑定'.on（）'仅适用于先前创建的脚本运行的内容。因此，一种解决方案是将事件绑定到父元素。

    $('.PARENT_ELEMENT').on('mousedown', '.enemy', function(event){
    // your code here
    }

应该这样做。

Answer 3

我做了谷歌像下拉建议搜索框，我遇到了类似于你的问题，在重新直接发生之前有建议消失。我通过使用和修改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;
});

moused在mousedown上没有处理动态生成的元素

3 个答案: