Я пытаюсь вызвать событие click для каждого элемента во вложенном списке и возвращать текст щелкнутого элемента. Часть возвращаемого текста работает нормально, но когда я выхожу за пределы списка, он по-прежнему запускает событие клика и возвращает текст элемента списка в соответствующей строке. Кто-нибудь сталкивался с такой проблемой?
HTML:
<div id="myDiv">
<ul id = "u" class="nam">
<li id="i1" class="nam">John</li>
<li id="i2" class="nam">
<ul id="uu">
<li id="i3">F</li>
<li id="i4">Fitzgerald</li>
</ul>
</li>
<li id="i5" class="nam">Kennedy</li>
</ul>
</div>
Код jQuery:
$("#u").on("click","li",function(event){
event.stopPropagation();
alert($(this).text());
});
Проблема в том, что без какого-либо ширинного стиля ваш div и UL берут всю ширину страницы.
Здесь вы можете увидеть этот пример: JSFIDDLE
Если вы дадите div с некоторыми, проблема исчезнет (контейнер будет нажимать будет меньше)
width: 200px;
Предоставление фиксированной ширины позволит решить эту проблему, но другое решение - обертывание содержимого li
с помощью span
. Вы можете сделать это с помощью jquery, если вы не хотите делать это в своем html-коде, а затем создайте событие click для селектора li span
.
$("li").not(":has(ul li)").wrapInner("<span></span>");
$("#u").on("click","li span",function(event){
event.stopPropagation();
alert($(this).text());
});
Просто создайте свой div ul li, и ваша проблема будет решена, потому что элемент, который вы используете, является блочным элементом, который использует полную страницу, поэтому создайте свою страницу или создайте фиксированный пиксель, который будет работать.
<ul id = "u" class="nam">
вероятно, не должно быть пробела вокруг=