jQuery的从追加（）项

Question

我尽量让来自追加（）元素上的一些动作是不可能的动作，但是这是不可能的：

我的HTML：

<table id="PA"> 
<tbody> 
    <tr> 
    <td><input type="text" class="argument" /></td> 
    <td><input type="button" class="less" value="-"/></td> 
    <td><input type="text" class="note" disabled="disabled" value="0"/></td> 
    <td><input type="button" class="more" value="+"/></td> 
    </tr> 
    <tr> 
    [...] 
    </tr> 
</tbody> 
<tfoot class="hide-if-no-paging"> 
    <tr> 
    <td colspan="6"> 
    <input type="button" id="btnAdd" value="Add"/> 
    </td> 
    </tr> 
</tfoot> 
</table> 

而我的JS代码：

//添加一行

function Add(){ 
$("#PA tbody").append(
    "<tr>"+ 
    "<td><input type='text' class='argument' /></td>"+ 
    "<td><input type='button' class='less' value='-'/></td>"+ 
    "<td><input type='text' class='note' disabled='disabled' value='0'/></td>"+ 
    "<td><input type='button' class='more' value='+'/></td>"+ 
    "<td><input type='button' class='btnDelete' value='X'/>"+ 
    "</tr>"); 
    $(".btnDelete").bind("click", Delete); 
}; 

// Suppr行

function Delete(){ 
    var par = $(this).parent().parent(); //tr 
    par.remove(); 
}; 

//积极作用

$(function(){ 
    //Add, Save, Edit and Delete functions code 
    $(".btnDelete").bind("click", Delete); 
    $("#btnAdd").bind("click", Add); 
}); 

//纸条行添加1

$('.more').mousedown(function() { 
    x=$(this).closest("tr").find(".note"); 
    val = parseInt(x.val()); 
    if(val<9){x.val(val+1);} 
}); 

//在纸条删除1排

$('.less').mousedown(function() { 
    x=$(this).closest("tr").find(".note"); 
    val = parseInt(x.val()); 
    if(val>1){x.val(val-1);} 
}); 

在Jsfiddle上可见：http://jsfiddle.net/9MyRa/。

第一次您可以看到，我可以在“.less”或“.more”上添加“.note”的值，但仅在元素上才会形成append（）。从追加（）这最后一个元素，这两种功能简化版，:-(

感谢的

Answer 1

您需要使用event delegation支持动态添加元素

$(function() { 
    //Add, Save, Edit and Delete functions code 
    $(".btnDelete").bind("click", Delete); 
    $("#btnAdd").bind("click", Add); 
    $('#PA tbody').on("click", '.btnDelete', Delete); 
    $('#PA tbody').on('click', '.more', function() { 
     x = $(this).closest("tr").find(".note"); 
     val = parseInt(x.val()); 
     if (val < 9) { 
      x.val(val + 1); 
     } 
    }); 

    $('#PA tbody').on('click', '.less', function() { 
     x = $(this).closest("tr").find(".note"); 
     val = parseInt(x.val()); 
     if (val > 1) { 
      x.val(val - 1); 
     } 
    }); 


    function Add() { 
     $("#PA tbody").append(
      "<tr>" + 
      "<td><input type='text' class='argument' /></td>" + 
      "<td><input type='button' class='less' value='-'/></td>" + 
      "<td><input type='text' class='note' disabled='disabled' value='0'/></td>" + 
      "<td><input type='button' class='more' value='+'/></td>" + 
      "<td><input type='button' class='btnDelete' value='X'/>" + 
      "</tr>"); 

    }; 


    function Delete() { 
     var par = $(this).closest('tr') //tr 
     par.remove(); 
    }; 
}); 

演示工作。Fiddle

当你使用一个普通的事件注册模型时，它将把处理程序直接注册到在处理程序注册执行点存在于目标中的目标，所以后面添加的元素是动态的盟友不会得到这些处理程序。

的解决方案是使用事件代理，在该模型中的处理程序被注册到当页面装有一个选择器以滤除源元件，其将存在一个祖先元素。这使得事件传播 - 元素中发生的事件被传播到所有的祖先元素（有少数例外，如焦点事件）。因此，发生在元素中的事件会传播到其中一个元素的祖先元素，处理程序将被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器相匹配，如果它满足，则处理程序被执行。