Question

当我点击Inner Add row时，它会从.charts-series表中添加正确的行，但如果我点击Outer Add Row，则会从.charts-series表中添加一行，而不是从.charts表中添加一行<div class='cont'> <table class="charts" cellspacing="0" cellpadding="0" border="2px solid #000000" align="center"> <thead class="charts"> <tr class="charts charts-first charts-last even"> <th class="charts charts-first charts-tr-header" width="5%">#</th> <th class="charts" width="40%">Name</th> <th class="charts charts-last">serie_points</th> </tr> </thead> <tbody class="charts"> <tr class="odd"> <td class="charts charts-first">1</td> <td class="charts"> <input name="" placeholder="place_series_name" /> </td> <td class="charts"> <table class="charts-series" cellspacing="0" cellpadding="2" border="0" align="center"> <thead> <tr class="even"> <th width="20px" /> <th>value</th> <th>seria_point</th> <th/> </tr> </thead> <tbody> <tr class="odd"> <td class="first">1</td> <td> <input name="" placeholder="0" /> </td> <td> <input name="" placeholder="0" /> </td> <td class="last"><a class="remove-btn remove" title="Remove row" /> </td> </tr> </tbody> </table> <a class="add-btn add" title="Add row">Inner Add Row</a> </td> </tr> </tbody> </table> <a class="add-btn add" title="Add row"> Outer Add Row</a> </div>表。这是小提琴http://jsfiddle.net/cbMHk/5/

HTML：

    $('.add-btn').live('click', function(){
        var prev = $(this).parent().find('table tbody');
        prev.find('tr:last').clone().appendTo( prev ).find('input').val('');
        return false;
    });

JS：

$(this).parent()

当我检查{{1}}时，它显示正确。有什么问题？

Answer 1

使用儿童代替查找。找到将深入找到你的选择器，你不希望在你的情况下。

    var prev = $(this).prev('table').children('tbody');
    prev.children('tr:last').clone().appendTo(prev).find('input').val('');

<强> Demo

添加live已被弃用，您可以通过将事件绑定到任何给定的DOM中存在的容器元素（或事件文档头）来使用on的事件委派语法。只要你需要这个活动的时间。

 $('.cont').on('click', '.add-btn', function () {
     .....
  }

.find（）方法在父项之后跳过表

1 个答案: