jQuery 복제본을 선택하고 삭제하지 못했습니다.

Question

기존 이미지의 사본을 만들려고합니다. 새 (복제 된) 이미지를 클릭 할 때마다 사라져야합니다. 그러나 나에게 아무런 효과가 없습니다. 무엇을 잘못하고 있습니까? 감사.

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

});

Answer 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(); 
      }) 
     ); 
    }); 
}); 

나는 두 번째를 선택하지했지만, 제대로 동작한다.

Answer 2

뒤에 .image_extended 에 대한 클릭 핸들러를 추가해야합니다. '#steps img'의 클릭 핸들러에 .image_extended 요소를 삽입하십시오. 여기서 한 것처럼 페이지에 요소가 있기 전에 .image_extended 클릭 핸들러를 추가하고 있습니다. '#steps img'에 대한 클릭 핸들러 안에 .image_extended를위한 클릭 핸들러를 추가 할 수 있지만, '#steps img'핸들러가있을 때마다 .image_extended에 대한 클릭 핸들러를 다시 추가하지 않도록주의해야합니다. 호출됩니다. 핸들러를 추가 할 때 모든 .image_extended 요소를 선택하는 대신 image_clone에 직접 적용하십시오. 그런 식으로 요소는 핸들러를 한 번만 가져옵니다.