jQuery DIV点击()接管DIV.IMG点击()

时间:2012-09-25 00:56:30

标签: jquery click

我尝试使用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>

我想将点击事件绑定到这些图片,因此当他们点击它们时,可以从&#34;徽标&#34;中删除它们。 div,我用.live()跟踪这些点击。
结果是,当我点击图像时,&#34; logos&#34;点击事件并触发img click事件。

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

由于

2 个答案:

答案 0 :(得分:4)

  

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

这是来自DOCS,但在点击传播到父级之前,还会将e.stopPropagation()放在您的图片上! :)

<强> jsBin demo

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

答案 1 :(得分:4)

你可以这样做。如果您使用&gt; 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" />'));
    }
});​