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）及其祖先與作爲第二個參數傳遞的選擇器相匹配，如果它滿足，則處理程序被執行。