Question

我试图在嵌套列表中的每个项目上触发click事件，并返回所单击项目的文本。返回文本部分工作正常但当我在列表外单击时，它仍然触发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());
});

Answer 1

问题是没有任何宽度样式，你的div和UL占据页面的整个宽度。

您可以在此处看到该示例：JSFIDDLE

如果你给div一些，问题将会消失（点击的容器会更小）

width: 200px;

Answer 2

给予固定宽度将解决这个问题，但另一个解决方案是将li内容包裹在span中。如果您不想在html代码中执行此操作，则可以使用jquery执行此操作，然后为li span选择器构建单击事件。

$("li").not(":has(ul li)").wrapInner("<span></span>");

$("#u").on("click","li span",function(event){
  event.stopPropagation();
  alert($(this).text());
});

FIDDLE

Answer 3

只需设置您的div ul li样式，您的问题就会得到解决，因为您使用的元素是使用整页的块元素，因此请设置页面样式或提供一些固定的像素。

在列表外单击时触发jQuery事件

3 个答案: