動態標記使用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>");
});