Question

我已经构建了一个表，我允许用户添加和删除行。我希望能够使用他们输入到这些行中的信息来进行计算，但似乎无法访问此信息，因为它已动态添加到页面中。

以下是我的添加和删除功能：

$("a.deleteRow").live('click', function (){
    $(this).parent().parent().remove();
});

$("a.addRow").live('click', function (){
    $("table.moneyTable tr:last").prev('tr').before("<tr>[Long row formatting]</tr>");
});

我在页面上有一些其他动态内容，例如依赖于选择框的各种文本输入框，这些也应该都可以访问。但是，他们没有回应我的jQuery。想法？

Answer 1

嗯...当前版本的jQuery中的委托是使用.on()函数执行的。我们将事件委托给一个静态父对象; document如下所示。

$(document).on('click', 'a.deleteRow', function(){
  $(this).parent().parent().remove();
});

$(document).on('click', 'a.addRow', function(){
  $("table.moneyTable tr:last").prev('tr').before("<tr>[Long row formatting]</tr>");
});

Answer 2

请试试这个：1.7 ..以上

API：.on http://api.jquery.com/on/

此外，如果您想知道原因：What's wrong with the jQuery live method?

delegate et。人。 jquery binding events to dynamically loaded html elements

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

希望它符合你的原因:)使用document在下面的帖子中也没有提到另一个好的版本，因此我不会在这里更新它！

$("a.deleteRow").on('click', function (){
    $(this).parent().parent().remove();
});

$("a.addRow").on('click', function (){
    $("table.moneyTable tr:last").prev('tr').before("<tr>[Long row formatting]</tr>");
});

如何通过jQuery访问动态HTML元素？

2 个答案: