0

私がテーブルを持っているとしましょう：

<table id="myTable">
    <tbody>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
    </tbody>
</table>
<a id="addLink">Add</a>

したがって、ここでのゲームの目的は、削除リンクをクリックすると、関連する行が消えることです。

だから私はいくつかのjavascriptを持っています：

<script type="text/javascript">
    $(document).ready(function () {

        $('.removeLink').click(function () {

            $(this).closest('tr').hide('slow');

        });

        $('#addLink').click(function () {

            $('#myTable').append('<tr><td><a class="removeLink" >Remove</a></td></tr>');

        });

    });
</script>

だから私は消える部分がこれで働いています。

ただし、追加リンクはテーブルに行を追加します。

追加された行の削除をクリックしても、消えません。クリックイベントが設定されていないので意味があります。

追加されたリンクのremoveLinksが非表示になるようにこれをコーディングするにはどうすればよいですか？

また、これは行を追加するための奇妙な方法ですか？もっと良い方法はありますか？

4

2 に答える 2

3

あなたが使用することができますon()：

$('#myTable').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
});

on()基本的に、指定されたイベントを指定された要素（#myTable）にバインドし、「ヒアリング」すると、イベントはターゲットを検査して、指定されたセレクター（に渡されたパラメーターの2番目）と一致するかどうかを確認します。on()その場合、匿名の3番目のパラメーターである関数が実行されます。

イベント処理/バインドの時点でDOMに存在するイベントの影響を受ける要素に最も近い要素に、イベント処理をバインドする方がよいようです。この場合tbody、それはになり、次の（わずかに）変更されたコードになります。

$('#myTable tbody').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

他の選択肢は次のとおりです（これはjQuery 1.7からdelegate()置き換えられていますが）：on()

$('#myTable').delegate('a.removeLink', 'click', function(e){
    $(this).closest('tr').remove();
}

またはlive()、これはjQuery 1.7で非推奨になりましたが、live()利用可能な場合でもdelegate()、優先的に推奨されます。それは言った：

$('#myTable').live('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

参照：

于 2012-08-02T20:52:56.597 に答える
0

が機能しない場合on()は、試してみてくださいlive()。

$('a.removeLink').live('click', function(e){
    $(this).closest('tr').remove();
});

ページの読み込み時に要素がDOMにあるかどうかを確認するのではなく、クリックされた要素が#myTableの「a」であるかどうかを確認します。このようにして、ページに要素を動的に追加し、期待する効果を得ることができます。

于 2012-08-02T20:57:17.110 に答える