9

ページに3つのdivボックスがあります。各divボックスには、コードからdivボックスを削除する削除ボタンがあります。同じイベントのajaxリクエストは、どのdivボックスが押されたかに基づいて一意の番号をサーバーに送信します。削除ボタンで複数のクリックイベントが呼び出されないようにするために、one（）イベントを使用しました。ただし、ボタンをすばやくクリックするまれなイベントでは、イベントが2回発生し、データベースが重複した番号を受信したことがわかります。one（）はそれが起こらないようにすると思いました。jqueryコードが2回起動するのは何が悪いのでしょうか？私のコードは以下の通りです。

HTMLのサンプルボタン

<input id="delete_post_3" type="button" value="X">

jQueryコード

$('#delete_post_1').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 1;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_1').remove();
    });
});

$('#delete_post_2').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 2;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_2').remove();
    });
});

$('#delete_post_3').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 3;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_3').remove();
    });
});

更新：リクエストごとに、ページ全体のコードについて簡単に説明します。

<script>

//when document is ready, loads jquery code that allows any div boxes that currently   
//exist on the page to have a click event that will delete the box. this is the same 
//code seen above in my example.

</script>

<form>
//form to fill out info
</form>

<script>
//ajax post sent when form button clicked
$.post('ajax_file.php', {data: data}, function(data){

//in here div box is created

<script>

//duplicated jquery code from top of page. without it the div box delete button does 
//not work

</script>

});

</script>
4

9 に答える 9

3

この問題がソートされているかどうかはわかりませんが、コメントのすべてのフィードバックを考えると、あなたは2回拘束されているようであり、あなたがそれを認識しているという回答のoneコメントに基づいているようです.user23875

イベントを 2 回バインドすると、単純に 2 回実行されます。

イベントを 2 回バインドしているという事実を完全に認識している場合は、最初に以前に添付されたイベントのバインドを解除してみてください。

$('#delete_post_1').off('click').one('click', function() {
...
$('#delete_post_2').off('click').one('click', function() {
...
$('#delete_post_3').off('click').one('click', function() {

完全な HTML を 2 回再レンダリングする場合を除き、上記により、1 回のクリック イベントのみが添付されていることが保証されます。

指摘したようuser23875に、あなたは確かにスクリプトで何かファンキーなことをしています。

コードを可能な限り分離して、実行するつもりのコードだけが呼び出されるようにする必要があります。

うまくいけば、上記はこの問題を解決します。

于 2012-09-23T00:59:19.830 に答える
0

投稿をロックして、すべてを次のような1つの関数にまとめる必要があります。

            var locker = 0;
        $('.delete_post').on('click', function() {
        if (locker == 0)
        {
        locker = 1;
        var session_user_id = <? php echo $session_user_id; ?> ;
        var number = $(this).attr('id');
        $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
        }, function() {
        $('#'+number).remove();
        locker = 0
        });
        }
        });

もちろん、入力内容は次のようになります。

<input id="3" class="delete_post" type="button" value="X">
 <input id="2" class="delete_post" type="button" value="X">
  <input id="1" class="delete_post" type="button" value="X">
于 2012-09-27T06:20:36.607 に答える
0

ボタンを追加するたびにイベントのバインドを停止し、代わりにイベント委任を使用して一度だけバインドします。

var session_user_id = <? php echo $session_user_id; ?> ;
$("#someparentelement").on( "click", "button[id^=delete_post]:not(.handled)", function(){
    var theid = this.id.replace(/delete_post_/i,"");
    $(this).addClass("handled");
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: theid
    }, function() {
        $('#post_' + theid).remove();
    });
});

小さなメモですが、渡す必要はないと思いますuser_id.phpはそれをセッションから引き出すことができるはずです。

編集:おっと、.one委譲されたイベントは、子ごとではなく、全体で 1 つのイベントしか発生しません。同様の.on機能に更新されました。

http://jsfiddle.net/JPULH/

重要
このコードは、複数回実行される場所に置かないでください。

于 2012-09-27T20:56:42.760 に答える
0

<さて、最初に と の間にスペースがないことを確認してくださいphp...session_user_idこれは可能な解決策かもしれません。

于 2012-09-17T21:21:55.890 に答える
0

クリック時にボタンにクラスを追加し'.disabled'、クリックイベントに:not(.disabled)on イベントセレクターを持たせてみませんか?

例：

$('#delete_post_1:not(.disabled)').one('click', function() { $(this).addClass('disabled'); var session_user_id = <? php echo $session_user_id; ?> ; var number = 1; $.post('ajax_delete_post.php', { user_id: session_user_id, number: number }, function() { $('#post_1').remove(); }); });

于 2012-09-21T00:26:05.247 に答える
0

同期呼び出しの問題を使用しているようです。クリック関数から新しい関数へのすべてのコードを削除します。クリック時にその関数を呼び出します。非同期 ajax リクエストも使用します。

于 2012-09-24T11:44:28.893 に答える
0

このコードを試して、コンソールが 2 回起動するかどうかを確認していただけますか?

$('#delete_post_3').on('click', function(event) {
    var session_user_id = <?php echo $session_user_id;?> ;
    var number = 3;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_3').remove();
    })
    $(this).off(event);
})

編集

最後に 1 つ試してください: 引用符

"user_id": session_user_id,
"number": number
于 2012-09-17T21:29:58.800 に答える
0

あなたの質問は、 one() が機能しなかった理由を見つけることでした。しかし、議論の過程で、複数の one() 宣言を作成することになったことが判明したようです。また、宣言する one() ごとに 1 つの execute を取得することもわかりましたが、これは状況にとって望ましくありません。その発見は技術的にあなたの質問に答えますが、あなたの問題は解決されていないと思います. 問題へのアプローチを変更して、最終的にこの JS フィドルを作成できるのではないかと考えていました。

http://jsfiddle.net/sEvAn/45/

私の提案の要点：

  1. クリック イベントを OUTER div ラッパー (私の例では "#post_list") にバインドします。これにより、投稿が ajax 呼び出しによって DOM に新しく作成/追加された場合でも、削除ボタンのクリックを常に検出できます。
  2. 各ボタンにカスタムの data-postid 属性を含めて、削除する必要がある投稿 ID を簡単に判断できるようにします。
  3. 私の例では、低速の fadeOut を使用して低速の ajax 呼び出しをシミュレートしています。しかし、その要点は、完了コールバック関数を使用して何か他のことを行う方法を示すことです (正常に削除された DOM 要素を削除するなど)。

それだけです。これは、stackoverflow に関する質問に回答する初めての試みです。

于 2012-09-27T22:12:08.553 に答える
0

あなたの文書で私が理解していることから：

<script>
   //if #delete_post_1 exists in the page, it receives a "once" event handler to delete #post_1
</script>

<form>
</form>

<script>
$.post('ajax_file.php', {data: data}, function(data){
   //if the request succeeds, this html code is loaded into the DOM
<script>
       //are you sure that you do not bind a *second* "once" event handler to #delete_post_1 ?
</script>
});

</script>
于 2012-09-24T11:41:49.080 に答える