jQuery DIV click()接管DIV.IMG click()

Question

我尝试过使用stopPropagation()，但没有成功。

我有这样的结构：

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

我有一个绑定到徽标的点击，它在里面附加了img元素，结果如下：

<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>

我希望将单击事件绑定到这些图像，这样当它们被单击时，它们就可以从"logos“div中删除，我使用.live()来跟踪这些单击。

结果是，当我单击一个图像时，“logo”单击事件和img单击事件都会被激发。

    $('.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.
    });  

谢谢

Answer 1

你可以做这样的事情。如果您使用的是> jQuery 1.4，则应该使用on而不是live。检查目标，如果是镜像，则将其删除。否则就别管它了。

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" />'));
    }
});​

Answer 2

从jQuery 1.7开始，.on()方法提供附加事件处理程序所需的所有功能。

这是来自DOCS，但也将您的e.stopPropagation()放在您的图像上，然后单击传播到父！:)

$('.logos img').on('click', function(e){
        e.stopPropagation();
        var answer = confirm("Delete image?");
        if (answer){
            $(this).remove();
        }
});

$('.logos').click(function(){
     $('.qq-upload-button input').click();
});