.find()方法在父项之后跳过表

Question

当我点击Inner Add row它时,从.charts-series表中添加正确的行,但如果我点击 Outer Add Row它,则从.charts-series表中添加一行而不是从表中添加一行.charts.这是小提琴http://jsfiddle.net/cbMHk/5/

HTML:

<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>

JS:

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

当我检查$(this).parent()它似乎是正确的.怎么了？

Answer 1

使用儿童而不是找到.找到会深入找到你的选择器,你不希望在你的情况下.

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

演示

添加on live已被弃用,您可以通过将事件绑定到DOM中存在于DOM中的容器元素(或事件文档头),只要您需要该事件,就可以使用on的事件委托语法.

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