动态标记使用jQuery添加DOM元素

Question

我想添加一个按钮，当用户点击一个span为hierchical树ul HTML元素。

这是一个例子：

<ul class="tree">
  <li>
    <span class="li_cat">Food</span>
    <ul class="tree">
      <li>
        <span class="li_cat">Fruit</span>
        <ul class="tree">
          <li>
            <span class="li_cat">Red</span>
            <ul class="tree">
              <li><span class="li_cat">Cherry</span></li>
            </ul>
          </li>
          <li>
            <span class="li_cat">Yellow</span>
            <ul class="tree">
              <li><span class="li_cat">Banana</span></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <span class="li_cat">Meat</span>
        <ul class="tree">
          <li><span class="li_cat">Beef</span></li>
          <li><span class="li_cat">Pork</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

jQuery代码是这样的：

$(document).on('click', '.li_cat', function(e){
  e.stopPropagation();
  $(this).html($(this).html()+" <button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'></i></button>");
});

我只想显示一次按钮，但是每次单击添加一个新按钮时，如何解决此问题？

Answer 1

在附加到document click事件中设置namespace ，以引用特定于.li_cat元素的click事件。 检查元素.attr("data-keyname")如果元素没有一个.attr("data-keyname")设置一个Boolean的元素标志.attr("data-keyname")使用.html(function) 。 如果所有.li_cat元素都将.attr("data-keyname")设置为true则删除document委派click事件。

 $(document).on('click.cat', '.li_cat', function(e) { e.stopPropagation(); if ($(this).attr("data-clicked") === undefined) { $(this).attr("data-clicked", true).html(function(_, html) { return html + "<button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'>button</i></button>" }); // if all `.li_cat` elements have `data-clicked` attribute if ($(".li_cat[data-clicked]").length === $(".li_cat").length) { // remove `click` event listener for `.li_cat` elements $(document).off("click.cat") } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tree"> <li> <span class="li_cat">Food</span> <ul class="tree"> <li> <span class="li_cat">Fruit</span> <ul class="tree"> <li> <span class="li_cat">Red</span> <ul class="tree"> <li><span class="li_cat">Cherry</span> </li> </ul> </li> <li> <span class="li_cat">Yellow</span> <ul class="tree"> <li><span class="li_cat">Banana</span> </li> </ul> </li> </ul> </li> <li> <span class="li_cat">Meat</span> <ul class="tree"> <li><span class="li_cat">Beef</span> </li> <li><span class="li_cat">Pork</span> </li> </ul> </li> </ul> </li> </ul> 

Answer 2

首先empty您的span ，然后添加button ，你想要的button只有一次。 同样，这将确保所有以前添加的button都将与events一起被删除。

$(document).on('click', '.li_cat', function(e){
  e.stopPropagation();
  var spanText = $(this).text();
  $(this).empty();
  $(this).append(spanText);
  $(this).append("<button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'></i></button>");
});