動態標識添加與jQuery

Question

我想添加一個按鈕，當用戶點擊一個span成hierchical樹ul HTML元素的DOM元素。

這是一個例子：

<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在namespace事件click引用特定於.li_cat元件click事件。檢查元素.attr("data-keyname")，如果元素沒有一個.attr("data-keyname")，在元素.attr("data-keyname")設置Boolean標誌，使用.html(function)。在document刪除委派click事件如果所有.li_cat元素都有.attr("data-keyname")設置爲true。

$(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>"); 
});