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点击函数

回答

相关问题