jquery распознает, если нажата li или p внутри li нажата

Question

<ul id='myid'>  
<li id='1'> my text 1 <p id='1' >inside p1 clicked</p></li>  
<li id='2'> my text 2 <p id='1' >inside p2 clicked</p></li>  
<li id='3'> my text 3 <p id='1' >inside p3 clicked</p></li>  
<li id='4'> my text 4 <p id='1' >inside p4 clicked</p></li>  
<li id='5'> my text 5 <p id='1' >inside p5 clicked</p></li>  

</ul>    

Привет, я просто хочу знать, как предупредить, если я нажимаю «мой текст 1», и как предупредить, если я нажимаю «внутри p1 нажал». Потому что всякий раз, когда я пытаюсь нажать на «мой текст1», это работает. но когда я пытаюсь щелкнуть «внутри p1 нажал», это выдает два предупреждения, одно с «моим текстом 1», а другое с «внутри p1 нажал». Пожалуйста, помогите, что может быть решением.

ниже код, который я использую.

$ ("# myid"). Делегат ('p', 'click', function () {

Заранее спасибо

Answer 1

Это вопрос всплывающих событий .Вы можете получить текущий выбранный элемент, используя event.target.

. Если вы хотите остановить всплывающее окно события, вы можете использовать event.stopPropagation

// click event for li
$("#myid li").click(function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").click(function(e){
    alert("p clicked");
    // stop event bubbling
    e.stopPropagation();
});

И ваш HTMLтакже не действует.Никогда не начинайте идентификатор с цифры.

Если вы хотите прикрепить событие клика для будущих элементов, также используйте .live или .delegate.

и поставьте return false вместо e.stopPropagation.

// click event for li
$("#myid li").live("click", function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").live("click", function(){
    alert("p clicked");
    // stop event bubbling
    return false;
});

Answer 2

Если вы уже получаете два события, вызов event.stopPropagation() в каждом обработчике кликов предотвратит вызов другого.

Еще проще было бы добавить обработчик одного клика в #myid и затем проверитьСвойство event.target, чтобы решить, как его обработать.

Answer 3

Вы можете использовать селектор типа

$ ("li p"). Click (function () {
alert ("p inside li is clicked");
})

вот демоверсия