2014-08-30 131 views
0

我想創建一個現有的圖像的副本,每當我點擊新的(克隆)圖像它應該消失,但沒有爲我工作,我做錯了什麼?謝謝。jQuery無法選擇和刪除克隆

http://jsfiddle.net/btn2abec/

$(document).ready(function() { 
$('#steps img').click(function() { 
    var image_clone = $(this).clone(); 
    $(this).after(image_clone).addClass('image_extended'); 
}); 
$('.image_extended').click(function() { 
    $(this).remove(); 
}); 

});

回答

1

首先,您必須在克隆的圖像上添加image_extended類。你在做什麼是在原始圖像上添加類。

其次,你必須綁定克隆圖像上的點擊事件處理程序。在這種情況下,添加事件處理程序的方式將不起作用。由於$(selector).click只添加一次處理程序,並且不關心執行該行後添加的元素。 爲此,您可以使用.on和下面給出的選擇器,或者在添加類時添加克隆圖像後使用.click

$(document).ready(function() { 
    $('#steps img').click(function() { 
     var image_clone = $(this).clone(); 
     $(this).after(image_clone.addClass('image_extended')); 
    }); 
    $(document).on('click','.image_extended', function() { 
     $(this).remove(); 
    }); 
}); 

$(document).ready(function() { 
    $('#steps img').click(function() { 
     var image_clone = $(this).clone(); 
     $(this).after(image_clone 
      .addClass('image_extended') 
      .click(function() { 
       $(this).remove(); 
      }) 
     ); 
    }); 
}); 

我沒有檢查了第二個,但它應該是工作。

1

您需要在之後添加.image_extended 的點擊處理程序,您將.image_extended元素插入到'#steps img'的點擊處理程序中。您在此處完成的方式是,在頁面上存在該元素之前添加.image_extended點擊處理程序。您可以將這些行添加到'#steps img'的點擊處理程序中的.image_extended的點擊處理程序,但是您需要小心,不要在每次處理'#steps img'處理程序時重新添加.image_extended的點擊處理程序被調用。添加處理程序時,不要選擇所有的.image_extended元素,只需將其直接應用於image_clone。那樣那個元素只會得到處理器一次。