요소의 자식에 대한 jQuery 경고 onclick?

Question

나는 특정 요소에 경고를 표시하려면이 코드를 사용하고 있습니다 :

$("#resultsBox").click(function (event) { 
    console.log('a'); 
    }); 

가 난 단지 당신이 '#resultsBox'내부 '리'요소를 클릭 할 때 경고를 표시합니다.

나는 이런 식으로 일을하려고 해요 : 이것은 요소의 #resultsBox 구조가

$("#resultsBox li").click(function (event) { 
    console.log('a'); 
    }); 

입니다 : 이것은 어떻게

<div id="resultsBox"> 
    <ul> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 

을 할 수 있는가? 질문 편집 후

Answer 1

그것은 나중이 아니라 동적으로 추가 요소, 그 순간에 당신의 선택 과 일치하는 모든 요소에 적용됩니다.

당신의 사업부는 "resultsBox"라고 감안할 때, 어떤 경우에 당신이 위임 된 이벤트 핸들러를 사용할 필요가, 당신이 실제로 동적으로 다른 작업의 결과를 표시 할 물건을 추가하는 가정하는 것이 합리적 보인다

:

을

$("#resultsBox").on("click", "li", function (event) { 
    console.log('a'); 
}); 

.on() method의이 구문은 처리기를 "#resultsBox"에 바인딩하지만 클릭이 발생하면 jQuery는 두 번째 매개 변수의 "li"선택자와 일치하는 자식 요소에 있는지 확인합니다. 그렇지 않으면 그렇지 않습니다.

Answer 2

UPDATE : http://jsbin.com/ocejar/2/edit

그러나 어쨌든, 또한 예를 들어 위 :

<div id="resultsBox"> 
    <ul id="myList"> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 


$("#myList > li").click(function (event) { 

     console.log('a'); 

     }); 

이 같은

Demo

Answer 3

뭔가이 지금 작업을해야

$("#resultsBox").find("li").click(function(){ 
    alert("You clicked on li " + $(this).text()); 
}); 

작동합니다사용잘 작동합니다. here을 참조하십시오. 그러나 $("#resultsBox").find("li")을 사용하면 실적면에서 little faster이되어야합니다. 당신이 그것을 작동해야 가지고

Answer 4

$("#resultsBox").find('li').click(function (event) { 
    alert($(this).text()); 
    }); 

Answer 5

귀하의 코드 : http://jsfiddle.net/GxCCb/

그것의 중요한 요소는 코드가 평가 될 때 존재해야합니다에 이벤트 처리기를 부착하려고하는 점에 유의하십시오. 나중에 추가 할 경우 on() (v1.7 이상) 또는 delegate() (< 1.7)을 사용해야하며,이 경우 이벤트 위임에 사용되며 요소를 나중에 추가하면 참조 할 수 있습니다.

) (에 사용 :

$("#resultsBox").on('click', 'li', function (event) { 
    alert(this.innerHTML); 
    }); 

데모 : http://jsfiddle.net/7Lz2Y/

사용 위임() :

을

$("#resultsBox").delegate('li', 'click', function (event) { 
    alert(this.innerHTML); 
    }); 

데모 : http://jsfiddle.net/XwYs5/

하지만, 존재하는 요소에 대한 이벤트 핸들러를 부착하기위한 다른 방법이 많이있다 전에 :

$("#resultsBox").find('li').click(function (event) { 
    alert(this.innerHTML); 
    }); 

데모 : http://jsfiddle.net/74Q7p/

$("#resultsBox ul > li").click(function (event) { 
    alert(this.innerHTML); 
    }); 

데모 : http://jsfiddle.net/a28U5/

Answer 6

일해야 겠어.당신이 .click()에 이벤트 처리기를 바인딩 할 때

$("#resultsBox ul li").click(function (event) { 
    console.log('a'); 
}); 

Answer 7

동적으로 추가되는 요소에 대해 작동합니다.