Jquery를 사용하여 런타임 추가 이미지에 클릭 기능을 추가하는 방법은 무엇입니까?

Question

나는 사용자가 클릭 할 때 브라우저에서 생성 된 HTML 테이블 마크 업을 가지고있다. 여기에 코드가

$('#selectedtable > tbody:first').append(
    '<tr > ' + 
     '<td>Chair</td>' + 
     '<td><img src="/Content/images/showinfo.png" title="Show Info"></td>' + 
    '</tr>' 
    ); 

그럼 내 질문에 위의 생성 된 이미지에 대한 클릭 이벤트를 추가 할 수 있습니까? 페이지가로드, .on()의 이벤트 위임 구문을 사용할 때 ID의 #selectedtable를 가진 요소가 존재한다고 가정

Answer 1

예,

(id를 my-image과 이미지에 대한)

$("#my-image").click(function() { 
    alert("I've been clicked"); 
}); 

와 함께, 당신은 DOM에 이미지를 추가 한 직후의 onclick 핸들러를 추가 할 수 있습니다 또는 당신은 핸들러를 설정할 수 있습니다 그 모든 미래의 추가 요소에 적용됩니다

$(document).on("click", ".image-class", function() { 
    alert("I've been clicked"); 
}); 

를 (이미지의 클래스 .image-class와)

Answer 2

:

$('#selectedtable').on('click', 'img', function(){...}) 

Answer 3

그것은 그러므로 당신처럼 선택할 수 있어야의 DOM에 추가됩니다 DOM 요소를 선택하고 원하는 이벤트 핸들러를 추가합니다.