javascript - jQuery on('click', ...) not working on appended element - Stack Overflow

admin管理员组

文章数量:1410705

I have a div that I append with the following code:

function generateBall(){
    var colors = ["fe0ba5", "00c0ff", "21f1a5", "f13e21", "e819fb", "3ae319", "ff9900", "512e5e", "284184"];
    var width = $('.reaction_area').width() - 40;
    var height = $('.reaction_area').height() - 40;
    var a = Math.floor(Math.random()*(width - 40 + 1) + 40);
    var b = Math.floor(Math.random()*(height - 40 + 1) + 40);
    var size = Math.floor(Math.random()*(32 - 24 + 1) + 24);
    var color = colors[Math.floor(Math.random() * colors.length)];

    $('.reaction_area').append('<div class="ball_2" style="left: '+a+'px; top: '+b+'px; height: '+size+'px; width: '+size+'px; background: #'+color+'" data-id="'+wave+'"></div>');
}

And then I have this:

$('.ball_2').on('click', function(){
    $(this).remove();
    wave--;
});

And it's not working. I have other elements that I append like that and clicking them works, why this doesn't?

I've tried also with $('document').on('click', '.ball_2', function(){ //code }); and it didn't work either.

I have a div that I append with the following code:

function generateBall(){
    var colors = ["fe0ba5", "00c0ff", "21f1a5", "f13e21", "e819fb", "3ae319", "ff9900", "512e5e", "284184"];
    var width = $('.reaction_area').width() - 40;
    var height = $('.reaction_area').height() - 40;
    var a = Math.floor(Math.random()*(width - 40 + 1) + 40);
    var b = Math.floor(Math.random()*(height - 40 + 1) + 40);
    var size = Math.floor(Math.random()*(32 - 24 + 1) + 24);
    var color = colors[Math.floor(Math.random() * colors.length)];

    $('.reaction_area').append('<div class="ball_2" style="left: '+a+'px; top: '+b+'px; height: '+size+'px; width: '+size+'px; background: #'+color+'" data-id="'+wave+'"></div>');
}

And then I have this:

$('.ball_2').on('click', function(){
    $(this).remove();
    wave--;
});

And it's not working. I have other elements that I append like that and clicking them works, why this doesn't?

I've tried also with $('document').on('click', '.ball_2', function(){ //code }); and it didn't work either.

• javascript
• jquery

Share Improve this question Follow asked May 8, 2016 at 0:35 ALSD MinecraftALSD Minecraft 1,51133 gold badges1212 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

That would be $(document) (without the quotes).

$('.ball_2').on('click', ...) doesn't work because the element .ball_2 doesn't exist yet at the time of execution. However, $(document).on('click', '.ball_2', ...) works because it puts the handler on an ancestor element and takes advantage of a phenomenon called "event bubbling". In simple terms, an ancestor is considered clicked when a descendant is clicked.

Since element with class ball_2 is generated dynamically.

$(document).on('click','.ball_2', function(){
    $(this).remove();
    wave--;
});

add following line in generateBall() function. Because the div is created dynamically, so we should bind the function when it being create. And this statement can let every '.ball_2' got it own remove function, assume there may be more than one '.ball_2'.

$('.ball_2:last').on('click', function(){$(this).remove());});

use delegate :

 $('.reaction_area').delegate('.ball_2', 'click', function (event) {

  $(this).remove();
    wave--;
});

本文标签： javascriptjQuery on(39click39) not working on appended elementStack Overflow