jQuery intermittent .on ('click')

Question

Я создаю веб-приложение, используя django и jQuery, и на одной из страниц событие $ (document) .com ('click' ... срабатывает очень прерывисто. список элементов в очереди проверки и возможность удаления каждого элемента. Если я перехожу от вершины к нижней части списка, события щелчка в основном срабатывают (но не всегда). Если я начинаю снизу, иногда они загораются ..., иногда не нужно 2 Некоторые щелчки, некоторая потребность 6+ щелкает перед регистрацией

Onto кода Это HTML Джанго создает из шаблона:

<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 стреляла на $ (документ) .он («щелчок», который был класс, определенный в 'DeleteItem. элемент «i» html, а не класс основной кнопки. Класс «fa-trash-o» - это маленький значок корзины, который занимает примерно 1/3 от области кнопок.

Так что будет если вы щелкнули smack bang в середине кнопки (прямо на мусорной корзине), все будет работать, но если вы щелкнули в другом месте на кнопке, ничего не произошло, то есть, иногда это срабатывает, иногда это происходит esn't.

Исправление было перенести определение класса «DeleteItem» к кнопке:

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