Question

我尝试对append（）中的元素进行一些操作，但这是不可能的：

我的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);
};

//提供一行

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”上添加带有clic的“.note”值，但只能在元素上添加append（）。在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

当您使用普通事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于dom中。因此，动态添加的元素将不会获得这些处理程序。

对此的解决方案是使用事件委托，在此模型中，处理程序注册到祖先元素，当页面加载了选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，然后处理器被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序已执行。

来自append（）的项目的jQuery不可能的操作

1 个答案: