jQuery間歇性.on（'點擊'）

Question

我正在構建一個使用Django和jQuery的Web應用程序，並在其中一個頁面$（document）.com（'click'...事件非常間歇性地觸發。結賬隊列中的項目列表以及刪除每個項目的選項如果我從列表的頂部到底部，點擊事件大多會觸發（但並非總是）如果我從底部開始，有時會觸發。，有時不是一些需要點擊兩下，有的需要6+註冊前點擊

走上代碼這是HTML的Django從模板生成：

<div class="container"> 
    <table id="cart" class="table table-hover table-condensed"> 
        <thead> 
         <tr> 
          <th style="width:70%">Product</th> 
          <th style="width:10%" class="text-center">Seller</th> 
          <th style="width:10%">Price</th> 
          <th style="width:10%"></th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr id="product-3653672818"> 
          <td data-th="Product"> 
           <div class="row"> 
            <div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div> 
            <div class="col-sm-9"> 
             <h4 class="nomargin">Product Name</h4> 
             <p>Product Description</p> 
            </div> 
           </div> 
          </td> 
          <td data-th="Seller" class="text-center">ONLINE</td> 
          <td data-th="Price">3.00</td> 
          <td class="actions" data-th=""> 
           <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button> 
          </td> 
         </tr> 

         <tr id="product-3653492642"> 
          <td data-th="Product"> 
           <div class="row"> 
            <div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div> 
            <div class="col-sm-9"> 
             <h4 class="nomargin">Product #2 Title</h4> 
             <p>Product #2 Description</p> 
            </div> 
           </div> 
          </td> 
          <td data-th="Seller" class="text-center">ONLINE</td> 
          <td data-th="Price">4.00</td> 
          <td class="actions" data-th=""> 
           <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653492642"></i></button> 
          </td> 
         </tr> 
</div> 

，這是我的jQuery：

$(document).on('click','.DeleteItem',function(event){ 
    event.preventDefault(); 
    var thisID = $(this).attr("id"); 
    var data = { Action: "delete", itemid: thisID}; 

    var pr = "#product-"+thisID; 
    $(pr).fadeOut(500, function() { $(pr).remove(); }); 

    $.ajax({ 
     url: "/cart/", 
     type: "POST", 
     data: data, 
     beforeSend: function (xhr, settings) { 
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
     }, 

     // handle a successful response 
     success: function (json) { 
      if (json.result == "OK") { 
       console.log(json); 
       console.log("success"); 
      } else { 
       console.log(json); 
       console.log("failure"); 
      } 
     }, 

     // handle a non-successful response 
     error: function (xhr, errmsg, err) { 
      console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console 
     } 
    }); 
}); 

Answer 1

好吧，萬一有其他人遇到這種情況，我最終搞清楚了這裏發生了什麼。

我定義模板按鈕的方式是罪魁禍首：

<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button> 

我的jQuery被射擊的$（document）。在（「點擊」，這是在定義的類「DeleteItem。」這個「i」html元素，而不是主要的按鈕類，「fa-trash-o」類是一個小垃圾桶圖標，只佔用按鈕面積的1/3左右。如果你點擊按鈕中間的按鈕（直接在垃圾桶上），一切都會奏效，但是如果你點擊按鈕的其他地方，什麼也沒有發生，即有時候它有效，有時它會esn't。

的修復是對「DeleteItem」類定義移動到按鈕：

<button class="btn btn-danger btn-sm DeleteItem" id="3653672818"><i class="fa fa-trash-o" ></i></button>