Question

i tried using stopPropagation() without luck.
I’ve this structure:

<div class="logos">  
</div>

I’ve a click binded to logos, that appends img elements inside it ends up like:

<div class="logos">
  <img width="100" height="80" src="/js/fileupload/uploads/Penguins.jpg">  
  <img width="100" height="80" src="/js/fileupload/uploads/Hydrangeas.jpg">
</div>

I want to bind a click event to those image, so when they’re clicked they can be removed from the “logos” div, i used .live() to track those clicks.
The result is that when i click an image, both the “logos” click event and the img click event are fired.

    $('.logos img').live('click', function(e){
        var answer = confirm ("Delete image?")
        if (answer){
            $(this).remove();
        }
    });
    $('.logos').click(function(e){
            e.stopPropagation();
            $('.qq-upload-button input').trigger('click'); //File uploader that uploads images and creates the img elements.
    });  

Thanks

Answer 1

You could do something like this. If you are using > jQuery 1.4 you should be using on instead of live. Check the target and if it is an image then remove it. Otherwise leave it be.

http://jsfiddle.net/AprTx/

$('.logos').on('click', function(e) {
    e.stopPropagation();

    if ($(e.target).is('img')) {
        $(e.target).remove();
    }
    else {
        $(this).append($('<img src="http://placehold.it/300x300" />'));
    }
});​