1

私のサイトには複数のボタンがあり、すべてのボタンが同じファイルからajaxを介してサイトに2回ロードされます。

私の問題は、同じボタンが2回読み込まれると、このイベントが2回発生することです。ボタンの1つだけがロードされている場合は正常に動作しますが。

私のコード：

index.php

<div id="firstButtonContainer">
</div>

<div id="secondButtonContainer">
</div>

<script>

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    script.onload = function(){

        $.ajax({
            url: '/test/firstButtonContainer.php',
            success: function(msg) {
                jQuery('#firstButtonContainer').html(msg);
            }
        });

        $.ajax({
            url: '/test/secondButtonContainer.php',
            success: function(msg) {
                jQuery('#secondButtonContainer').html(msg);
            }
        });

    };document.body.appendChild(script);

</script>

buttons.php

<button class="testbutton">Button1</button>
<button class="testbutton">Button2</button>
<button class="testbutton">Button3</button>
<button class="testbutton">Button4</button>

<script>

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
script.onload = function(){



$(".testbutton").on("click", function(event){
  alert("this should only appear once");
});


};document.body.appendChild(script);

</script>

firstButtonContainer.php

<div id="buttons">
</div>

<script>
$.ajax({
    url: '/test/buttons.php',
    success: function(msg) {
        jQuery('#buttons').html(msg);
    }
});
</script>

secondButtonContainer.php

<div id="buttonsTwo">
</div>

<script>
$.ajax({
    url: '/test/buttons.php',
    success: function(msg) {
        jQuery('#buttonsTwo').html(msg);
    }
});
</script>
4

4 に答える 4

1

試す

$(".testbutton").on("click", function(event){
  event.preventDefault();
  alert("this should only appear once");
});

また

$(".testbutton").on("click", function(event){
  event.stopPropagation();
  alert("this should only appear once");
});

event.stopPropagation（）

説明：イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

event.preventDefault（）

説明：このメソッドが呼び出された場合、イベントのデフォルトのアクションはトリガーされません。

コメント応答

index.php

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {
        $.ajax({
            url: 'test/firstButtonContainer.php',
            success: function(msg) {
                jQuery('#firstButtonContainer').html(msg);
            }
        });

        $.ajax({
            url: 'test/secondButtonContainer.php',
            success: function(msg) {
                jQuery('#secondButtonContainer').html(msg);
            }
        });

        $(".testbutton").live("click", function(event)
        {
            event.preventDefault();
            alert("this should only appear once");
        });
    });

</script>

<div id="firstButtonContainer">
</div>

<div id="secondButtonContainer">
</div>

buttons.php

<button class="testbutton">Button1</button>
<button class="testbutton">Button2</button>
<button class="testbutton">Button3</button>
<button class="testbutton">Button4</button>
于 2013-02-15T10:24:16.507 に答える
0

ボタンがajax呼び出しを適切に起動していません。すべてのボタンに、一意のID（つまり、testbutton1、testbutton2など）があり、jQueryで次のようにonclickトリガーを使用している必要があります。

$("#testbutton1").click(function(){
  // do ajax call here for button1           
});
于 2013-02-15T10:23:26.027 に答える
0

あなたのコードは私には少し奇妙です！これは、AJAX呼び出しを介してHTMLをフェッチするたびに、使用するcssクラスセレクターのために新しいイベントハンドラーをすべてのボタンにバインドするために発生します。この問題を解決するために、2つの提案があります。

1-もう少し複雑なPHPコードを使用して、ボタンごとにランダムな（または何らかのパターンの）IDを生成し、その一意のIDを使用して新しいイベントをバインドします。

<?php
$id = "btn_id_" . rand (100,1000);
?>
<buttom class='whatever' id='<?php echo $id; ?>'>

$("#<?php echo $id; ?>").on("click", function(event){
  alert("this should only appear once");
});

2-上記のソリューションが気に入らない場合は、AJAXrequetsの外でjQueryライブトリガーを使用してください。

a。buttons.phpからonloadスクリプトを削除します

b。次のJavaScriptコードをindex.phpに追加します

<script>
(".testbutton").live ( 'click', function () {
   alert ( "This happens only once!" );
});
</script>

そして、すべてがうまくいくはずです。jQueryライブイベントは、セレクターとして新しく追加されたすべての要素を処理し、それにイベントハンドラーをアタッチして、1回だけ発生することを保証します。

私の個人的な選択はアイテム番号です。1

于 2013-02-15T10:43:11.820 に答える
0

1つの理由は、同じイベントを複数回バインドし、各バインドがカウントされることです。
したがって、これが理由である場合は、次の方法で解決できます。

// unbind the same event, before you bind it,
$("xxx").unbind("click").bind("click", function() {
    // ...
});
于 2014-06-21T18:56:14.240 に答える