jQuery：對錶tbody附加tr可防止tr點擊函數

執行查詢後，表格行被添加好，它使用戶可以使用Delete按鈕刪除該行，這裏是事情開始變得繁瑣，與附加tr有關的任何函數都不起作用，即使我將button.click改爲整個tr，它也會刪除頭tr和除附加tr之外的其他每個表tr！jQuery：對錶tbody附加tr可防止tr點擊函數

只是爲了澄清，該表是不#codbar

$('#codbar').submit(function(e) 
    { 
     e.preventDefault(); 
     $.ajax(
     { 
      url: "/GoogleStore/ajax/venta.php", 
      data: {'iditem': $('#id-item').val()}, 
      dataType: "json", 
      type: "GET", 
      success: function (data, status, jqXhr) 
      { 
       var i = 0; 
       var end = parseInt($('input[name = "contador"]').val()); 
       for(i = 0; i <= end; i++) 
       { 
        if($('input[name = "cod'+i+'"]').length && $('input[name = "cod'+i+'"]').val() == data["Cod"]) 
        { 
         $('input[name = "cant'+i+'"]').val(parseInt($('input[name = "cant'+i+'"]').val()) + 1); 
         $('span[name = "total'+i+'"]').text(parseFloat($('input[name = "cant'+i+'"]').val()) * parseFloat($('input[name = "precio'+i+'"]').val())); 
         i = end; 
        } 
        else if(i == end) 
        { 
         $('input[name = "contador"]').val(); 
         $('table[name = "venta"]').find('tbody').append($('<tr><td><span>'+data["Prod"]+'</span></td><td><input type="hidden" name="cod'+i+'" value="'+data["Cod"]+'"><span>'+data["Cod"]+'</span></td><td><input type="text" name="cant'+i+'" value="1"></td><td><input type="hidden" name="precio'+i+'" value="'+data["Precio"]+'"><span>'+data["Precio"]+'</span></td><td><span name="total'+i+'">'+data["Precio"]+'</span></td><td><input type="button" class="red" name="DeleteRow" value="Eliminar"></td></tr>')); 
         $('input[name = "contador"]').val(end + 1); 
        } 
       } 
      }, 
      error: function (jqXhr, textStatus, errorThrown) 
      { 
       console.log("Error response:", jqXhr.responseText); 
      } 
     }); 
    }); 

    $("input[name = 'DeleteRow']").click(function() 
    { 
     alert(''); 
     $(this).closest('tr').fadeOut('slow', function() 
     { 
      $(this).closest('tr').remove(); 
     }); 
    });

來源

2015-03-03 Jofran

動態HTML不會工作活動。可以使用Live或On來綁定事件。 – 2015-03-03 06:32:40

謝謝！我不知道，我是jQuery的新手。 – Jofran 2015-03-03 06:36:42

您需要將事件委託給靜態父窗體中：

$(document).on('click', "button[value = 'Eliminar']", function()

改變這一如上。

因爲你追加tr動態等靜態元素註冊的事件將不會新創建的元素上的約束。

來源

2015-03-03 06:30:47 Jai

它的工作！謝謝，介意解釋爲什麼？ – Jofran 2015-03-03 06:32:52

@Jofran動態創建的元素不是dom的一部分，因此綁定在靜態按鈕/ dom節點上的事件將不會被註冊爲新的元素。 – Jai 2015-03-03 06:36:27

試試這個

$("table[name = "venta"]").on("click","button[value = 'Eliminar']",function() 
    { 
     alert(''); 
     $(this).closest('tr').fadeOut('slow', function() 
     { 
      $(this).closest('tr').remove(); 
     }); 
    });

來源

2015-03-03 06:31:11

jQuery：對錶tbody附加tr可防止tr點擊函數

回答

相關問題