0

良い一日、

私はしばらくの間、この特定のコードに苦労しています。私が読んで、JQueryとStackoverflowから試したことはすべてです。主な問題は、基本的にすべての回答 (私が見つけたもの) が既に生成された HTML または静的ページに対応していることです。

私の削除コード (以下) は、コメント付きとコメントなしの両方で、静的な html リストで作成されたページで完全に機能します。

$(function () {
    //$(".deleteButton").click(function () {
    //    //$(this).closest("li").remove();
    //    jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
    //});
    $('.deleteButton').on({
        click: function () {
            jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
        }
    });
});

ただし、jQuery を使用して別の「li」タグを追加するとすぐに、削除ボタンは削除ボタン内のテキストのみを削除し、ページに「li」を残します。

「li」を追加するために使用するコードは次のとおりです

function UpDatePage() {
    $.ajax({
        type: 'GET', url: "NewAdditions", contentType: "application/json", processData: false,
        success: function (data) {
            data = JSON.parse(data);
            for (var key in data) {
                $('.dlList').append(data[key]);
            }
            setTimeout(UpDatePage, 5000);
        }, dataType: "text"
    });
}

データ[キー]はこのようなものです

'<li class="ui-state-default dlItem" id={0}><table><tr><td style="width:50%"><input type="submit" value="{1}" id={2} onclick="Resume(this.id); return false"/> \
                                        <input type="submit" class="deleteButton" value="Delete" id=del-{2} onclick="Delete(this.id); return false" /> \
                                        <label>{3}</label></td> \
                                    <td style="width:10%; text-align:center" id=per-{2}>{4}</td> \
                                    <td style="width:5%; text-align:center" id=tfs-{2}>{5}</td> \
                                    <td style="width:6%; text-align:center" id=est-{2}>{6}</td> \
                                    <td style="width:5%; text-align:center">{7}</td> \
                                    <td style="width:10%; text-align:center">{8}</td></tr></table></li>'

私は本当にこれで立ち往生しています。私はこちら側で複数のリンクをたどり、jQuery テキストを読み、さまざまなコード順列を試しました。

うまくいけば、誰かがここで私を助けてくれるか、正しい方向に向けてくれます。

背景: バックエンドとして python と cherrypy を使用し、テンプレートには mako を使用しています。ページがすでに読み込まれているため、私が抱えている問題を彼らが引き起こしているとは思えないので、完全を期すためにこれについて言及します。

ありがとう

4

3 に答える 3

1

動的に追加された html の場合、イベントの委任を少し異なる方法で処理する必要があります。

$(document).on('click','.deleteButton', function(){
});

はdocument、より推奨される外部コンテナー セレクター (div など) に置き換えることができます。

あなたもできますliveが、これは新しいバージョンでは非推奨です

$('.deleteButton').live( 'click', function(){} );
于 2013-07-31T13:50:07.340 に答える
0

したがって、基本的に問題は、要素を追加する前にリスナーを追加 (クリック) することです。その結果、リスナーは、新しく追加された要素ではなく、以前にページにあった要素に存在します。したがって、やりたいことを行うには、これらのリスナーを再割り当てするか、「ライブ」にする必要があります。jQuery 1.9 以降の場合:

$(document).on('click','.deleteButton', function(){ });

ページ上の変更されない要素 (通常はドキュメント) にリスナーを追加します。jQuery 1.8 以下:

$('.deleteButton').live('click',function() { });

<LI>または、ajax 成功コールバック関数に追加されたリスナーを追加することもできます。ただし、以前のリスナーを確認して削除する必要があるため、少し複雑になります。つまり、「ライブ」のアイデアに固執する必要があります;)

お役に立てれば

于 2013-07-31T13:54:03.953 に答える
0

ドキュメントにバブルアップしたイベントをリッスンする代わりに、クリックハンドラーをあなたの親要素にバインドすることです（これはクラスと一緒でliあると想定しています）：ul.dLlist

$('.dlList').on('click','.deleteButton', function(){
  // work magic
});

これにより、動的に作成されたコンテンツをリッスンできますが、イベントがドキュメントに到達してハンドラーをトリガーするのを待つという潜在的な混乱を回避できます。

于 2013-07-31T13:59:04.707 に答える