jQuery alert onclick na elemencie elementu?

Question

używam tego kodu, aby wyświetlić alert na pewnym elemencie:

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

chcę wyświetlić alert tylko po kliknięciu elementów „LI” wewnątrz "#resultsBox.

Staram się zrobić to tak:

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

Jest to element w #resultsBox struktura:

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

Jak można to zrobić?

Answer 1

Podczas wiązania programu obsługi zdarzeń z .click() to dotyczy wszelkich elementów dopasowanych do selektora w tej chwili, nie później elementów dodawanych dynamicznie.

Biorąc pod uwagę Twój div nazywa się „resultsBox”, zasadne wydaje się zakładać, że faktycznie dodawanie rzeczy do niego dynamicznie wyświetlać wyniki innej pracy, w takim przypadku trzeba użyć delegowanego obsługi zdarzenia:

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

Ta składnia łączy program obsługi z "#resultsBox", ale po kliknięciu jQuery sprawdza, czy element potomny pasuje do selektora "li" w drugim parametrze - jeśli tak, to wywołuje funkcja, w przeciwnym razie nie.

Answer 2

UPDATE po edycji pytanie:

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


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

     console.log('a'); 

     }); 

Demo

Answer 3

Coś jak to powinno działać

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

To powinno działać teraz: http://jsbin.com/ocejar/2/edit

Ale tak czy inaczej, też swój przykład powyżej przy użyciu $("#resultsBox li") powinien działać dobrze. Zobacz here. Jednak użycie parametru $("#resultsBox").find("li") powinno być zgodne z wymaganiami wydajności.

Answer 4

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

Answer 5

Kod jak masz powinien pracować: http://jsfiddle.net/GxCCb/

Ważne, aby pamiętać, że elementy próbujesz dołączyć do obsługi zdarzeń musi istnieć, gdy kod jest oceniany. Jeśli zostanie dodany później, musisz użyć on() (v1.7 +) lub delegate() (< 1.7), który jest używany do delegowania zdarzeń i pozwala na odwoływanie się do elementów, jeśli zostaną dodane później ..

Stosując na():

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

Demo: http://jsfiddle.net/7Lz2Y/

Stosując pełnomocnik():

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

Demo: http://jsfiddle.net/XwYs5/

Jednakże, istnieje wiele innych sposobów na dołączenie obsługi zdarzeń dla elementów, które istniały przed:

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

Demo: http://jsfiddle.net/74Q7p/

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

Demo: http://jsfiddle.net/a28U5/

Answer 6

To s mógł pracować.

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

Answer 7

$("#resultsBox").click(function (event) { 
    if(event.target.tagName.toLowerCase() == "li"){ 
     console.log('a'); 
    } 
}); 

Będzie działać dla dynamicznie dodawanych elementów li.