0

私は小さなアプリを書いています.jqueryを使用して動的にロードされたdivを（フェードアウトのように）削除するのに問題があります。

この問題は、新しいコンテンツ ボックスを追加したときにのみ発生します。ページをリロードし、コンテンツ ボックスが動的ではなく通常 (データベース クエリのように) レンダリングされた場合、(フェードアウトのように) うまく削除されますが、 div が新たに追加されました。取得できません。

$result = '<div class="my-music-item">'. $app['twig']->render('soundcloud-player.twig', array(
            'url'=>$mix->getUrl(),
            'player_type'=>'artwork',
            'url'=>$mix->getUrl(),
            'color'=>'ff0948',
            'height'=>'200',
            'width'=>'200'
        )) . '<p class="delete-mix-wrapper"><a class="delete-mix" data-mix-id="'.$mix->getId().'" data-post-to="'.$app['url_generator']->generate('delete-mix-post').'" href="javascript:;">Delete</a></p>' . '</div>';

        return new Response(json_encode(array(
            'html'=>$result,
            'status'=>'true'
        )));

これは、div を動的に作成するコードです。

しかし、削除をクリックしても何も起こりません。

ここに、js を介して投稿リクエストを処理するコードがあります。

$('a.delete-mix').on('click', function() {
    var parent = $(this).closest('div.my-music-item');
    $.post($(this).attr('data-post-to'), { mix_id: $(this).attr('data-mix-id') })
    .done(function(data) {
        parent.css('background-color', 'pink');
        parent.fadeOut('fast');
    });
});

私はたくさん読んでいますが、あまり運がありません！また、最初に私のコードは少し異なって見えました。

.on('click', function() {

むしろそうでした

.click(function() {

ご意見をお寄せいただきありがとうございます。

4

1 に答える 1

1

@PSLは正しいです。jQuery を使用してイベント ハンドラーを追加する際の一般的な問題は、JS の実行時に要素がページに存在しないことです。つまり、イベント ハンドラーがその要素にバインドされておらず、何も起こりません。

ラインを変えると

$('a.delete-mix').on('click', function() { ... } )

に

$( document ).on( 'click', 'a.delete-mix', function() { ... } )

それなら困らないはずです。

メソッドに渡される 2 番目の引数はon()、イベント ハンドラーをバインドする元のセレクターへのフィルターとして機能します。私が平易な英語で提供した例を説明すると、ページのどこでもクリックをリッスンし、クリックされたもの<a>がdelete-mix. をクリックしてしまった場合はa.delete-mix、コールバック関数が実行されます。そうしなかった場合、何も起こりません。

これは正確には最善の解決策ではありません。にグローバル クリック ハンドラを追加すると、document問題が発生する可能性があります。より良い解決策はdocument、追加する動的ボックスをラップするコンテナ要素など、より具体的なものに置き換えることです。あなたからのコードがなければ、そのセレクターがどうあるべきか完全にはわかりません。

詳細については、メソッドに関する jQuery ドキュメントon()を参照してください。

お役に立てれば。

于 2013-09-24T20:18:12.917 に答える