0

コードは、タブごとにHTML+JSを生成します。これで、各タブに、PHPを使用してHTML内で生成される2つのボタンがあります。また、JQueryを使用してボタンごとにJavascriptonclickイベントを生成しました。

これは、生成される各ボタンのjqueryクリックイベントです。

    <script type="text/javascript">
    $(function() {
        $(document).on("click", ".mybutton", function(e) {
            e.preventDefault();
            alert($(this).attr('whoami'));
            return false;
        });
    });
    </script>'

これで、htmlによって生成される2つのボタンの構造は次のようになります。

<button type="button" class="mybutton" whoami="button_1">First Button</button>
<button type="button" class="mybutton" whoami="button_2">Second Button</button>

これで、htmlとJSの両方が正常に生成されます。両方のボタンが正常に表示され、JSエラーは発生しません。両方のボタンをクリックできますが、次のようになります。

最初のボタンをクリックすると、次のように警告されます。

 button_1
 button_2

クラス名が同じであるため、両方のボタンクリックが実行されます。両方のボタンが実行されないようにするにはどうすればよいですか？クリックしたボタンだけを実行する必要があり、すべてではありません。

e.stopImmediatePropagation（）を追加しようとしましたが、次のようになります。

最初のボタンをクリックすると、アラートが正しく表示され、button_1クリックのみが実行されますが、2番目のボタンをクリックすると、button_2ではなくbutton_1クリックイベントのみが実行されます。

助けてください。

注： 両方を実行すると思う理由は、htmlに追加される2つのjavascript部分があり、両方のスクリプトに.buttonのクリックイベントがありますが、このコードを変更できないため、クリックされたボタンのみが実行されることを確認する必要があります。

4

5 に答える 5

0

解決策は次のとおりです。

$(".mybutton:not(.bound)").addClass("bound").on("click", function(e) {
   e.preventDefault();
   alert("hello");
   return false;
});

2回ではなく1回だけhelloにアラートを送信します。

于 2013-03-08T18:11:38.957 に答える
0

ドキュメントのクリックをターゲットにすることが、ここで実行したいことであるかどうかはわかりません。使用しない理由は何ですか：

$('.mybutton').on('click', function() {
  /* YOUR CODE HERE */
});

これにより、ドキュメントのより大きなコンテキストをイベントリスナーに強制することなく、探しているものを実現できます。

于 2013-03-08T16:21:50.610 に答える
0

clickクリックの代わりに特定のボタンのイベントを書き込み$(document)ます。

 <button type="button" class="mybutton" id="button_1">First Button</button>
 <button type="button" class="mybutton" id="button_2">Second Button</button>

JavaScript コードは :-

 $('#button_1').click(function(){
    //write your code here     

  }) 

  $('#button_2').click(function(){
    //write your code here     

  })

または、クラス名で行うこともできます

  $('.mybutton').click(function(){
     var idval = $(this).attr('id');
     alert(idval);

    //on the basis of particular id you can perform desired operation here

  })
于 2013-03-08T16:22:15.390 に答える
0

whoami を属性として使用する代わりに、より良いアイデアである id を使用できます。ボタンのクリック イベントの場合、両方が持つ共有の className を使用してボタンのコレクションのみを選択し、それにクリック ハンドラを適用すると、$(this) がクリックされた特定のボタンになります。すでに e.preventDefault() を実行しているため、false を返す必要もありません。

$(function(){
  $('.mybutton').on('click', function(e){
     e.preventDefault();
     alert($(this).attr('id'));
  });
});

<button type="button" class="mybutton" id="button_1">First Button</button>
<button type="button" class="mybutton" id="button_2">Second Button</button>
于 2013-03-08T17:11:17.697 に答える