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

Question

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.

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

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

//attack code

}

Its working fine for initial mobs (1st wave) but it still just not working on dynamic mobs (>= 2nd wave)

Help, guys, please?

Answer 1

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.

$('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 .enemy elements. This way, when a .enemy element is added, the event doesn't need to bubble all the way up to the body tag.

Answer 2

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.

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

That should do it.

Answer 3

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:

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;
});