为动态创建的列表项及其内容添加单击操作

Add on click action for dynamically created list item and its contents

本文关键字：添加 单击 操作 创建 动态 列表      更新时间：2023-09-26

我用JavaScript动态创建了一个树列表。它看起来像：

<ul>
  <li><img />First</li>
  <ul>
    <li>Item one</li>
    <li><img />Item two</li>
    <ul>
      <li>Something</li>
    </ul>
  </ul>
  <li>Second</li>
</ul>

我在有孩子的<li>中添加了图像。

以下是我的点击事件：

$('li').on({
    click: function(e) {
      if (this === e.target) {
        $(this).children('i.glyphicon').toggleClass('glyphicon-minus glyphicon-plus')
        $(this).siblings('ul').toggle('medium');
      }
    },
    mouseover: function() {
      if ($(this).siblings('ul').length > 0) {
        $(this).children('i.glyphicon').addClass('bg-button');
      }
    },
    mouseout: function() {
      $(this).children('i.glyphicon').removeClass('bg-button');
    }
  });

i是我从引导程序中使用的图像。我的单击操作适用于<li>中的文本，但是如何为<li>中的图像扩展此功能？

您可以将if条件更改为$(e.target).closest('li').is(this) 

$('li:has(ul)').on({
  click: function(e) {
    if ($(e.target).closest('li').is(this)) {
      $(this).children('i.glyphicon').toggleClass('glyphicon-minus glyphicon-plus')
      $(this).children('ul').toggle('medium');
    }
  },
  mouseover: function() {
    $(this).children('i.glyphicon').addClass('bg-button');
  },
  mouseout: function() {
    $(this).children('i.glyphicon').removeClass('bg-button');
  }
});
li ul {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

您的标记存在一些问题，因为ul不能是另一个ul的child，您需要将其放在li

相关文章：