チェックボックスのために2回呼び出されjQueryのクリックイベントハンドラは、私はASPXページに次のコードに問題がある
私は、このチェックボックスは、このようなものですHTMLにレンダリングされる方法に関係していると思います：
<span class="test">
<input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/>
<label for="ctl00_c1_cb1">Checkbox XYZ</label>
</span>
I二回呼び出されてからそれを防ぐために正しくセットアップクリックイベントハンドラにはどうすればよいです？
もう一度私の質問を読んだ後、私はそれを解決する方法を見つけました。
ただ、jQueryのセレクタへの "入力" を追加：あなたが見ている何
<script type="text/javascript">
$(document).ready(function() {
$('.test input').click(function() {
alert("click")
})
});
</script>
は、イベントバブリングです。クリックイベントは、まずラベルによって処理され、チェックボックスに渡されます。それぞれに1つのアラートが表示されます。イベントのバブリングを防ぐには、クリックハンドラでfalseを返す必要があります。このイベントをバブリングを防止しつつ
$(document).ready(function() {
$('.test').click(function() {
alert("Click");
return false;
})
});
、また状態を変更チェックボックスを防止する望ましくない副作用を有します。だからあなたはそれをコードする必要があります。
for属性の<label>は、クリックされたときに関連付けられた<input type="radio">または<input type="checkbox">要素のクリックイベントを発生させるためです。
あなたのjQueryコードでは、<label>と<input>の両方のクリックイベントハンドラを<span class="test">に設定しています。 <label>をクリックすると、ラベルに設定したクリックイベントハンドラが実行され、ラベルに<input>のクリックイベントが発生すると、<input>に設定されたクリックイベントハンドラが実行されます。
'alert（" click "）;' to 'alert（e.target。tagName）; ' - 最初に' LABEL'と 'INPUT'を見ると、ラベルが最初にクリックイベントを発生させた後、関連するチェックボックスをチェック/チェック解除し、入力がクリックイベントを発生させることを示します。 –
最後に問題のまともな説明を見つけることをお勧めします。 –
$(document).ready(function() {
$('.test').click(function(event) {
event.stopImmediatePropagation();
alert("Click");
})
}
);
私はイベントの伝播を停止してコードを稼働させることができました。チェックボックスのステータス変更には影響しませんでした。
残念ながら、これは私のためには機能しません（IE8でテスト済み）。チェックボックスに関連付けられたラベル/テキストをクリックすると、アラートは引き続き2回表示されます。 – M4N
私は同じことを経験したことがありますが、イベントのバブリングが私の問題を引き起こしているとは確信していません。私はカスタムツリーコントロールを持っています。アイテムが開かれたら、$(id).click()を使用して、特定の種類のすべての要素にハンドラをアタッチします。
これは、既にイベントがある既存のアイテムが既に追加されている可能性があると考えられます。
解決$('img.load_expand').unbind("click").click(function()
{
// handler
});
：のFirefox 3.6.12およびIE8で動作するように、この私が再結合、その後のすべてのバインドを解除するので、私の問題を解決することを見出しました。
$(function(){
$("form input:checkbox").unbind("click")
.click(function(){
val = $(this).val();
alert(val);
})
}
トリックは.click(fn)にバインドする前unbind("click").にあります。同じイベントが2回発生するのを無効にします。
イベント「変更」は、最初にチェックボックスがオンになってもトリックしないことに注意してください。だから私は代わりに "クリック"を使用します。
クリックイベントで同じ問題が発生し、thisという記事が見つかりました。本質的に、 <body></body> タグ内に複数のjQueryドキュメント対応機能がある場合は、複数のイベントを取得できます。上記のように、修正はもちろん、そうしない、またはクリックイベントをバインド解除して再バインドすることです。複数のjavascriptライブラリを使用すると、複数のdocument.ready（）を避けるのが難しい場合があります。アンバインドは適切な回避策です。
<code>
$('#my-div-id').unbind("click").click(function()
{
alert('only click once!');
}
</code>
だけではなく、.click
よりも.mouseup使う関数が二度実行されます。内部から一度それは内部から再び呼び出されます。単純に最後にreturnステートメントを追加します。
<script type="text/javascript">
$(document).ready(function() {
$('.test').click(function() {
alert("click");
return false;
})
});
</script>
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
これは完全に機能しました。
私はこの問題を今までにはまったく解消していますが、同じ問題に直面しています。私が見つけた解決策を追加したいと思います。
あなたのようなASPコードを追加する場合：
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
問題は<asp:CheckBox ...>は、HTMLコントロールではないということです、それだけでASP
が発明した、いくつかの心理
のねじれた心から構成される何か、そうブラウザは何か他のものを受け取るでしょう。ブラウザでそれのためにスパンされたコンテンツの入力「チェックボックス」とラベルを受け取る
：多くの可能な解決策の
<span class="test">
<input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/>
<label for="evenMoreGarbage_cb1">Checkbox XYZ</label>
</span>
ワン：
は、ブラウザのようなものを受け取ることになりますあなたのテキスト。したがって、私の解決策は次のようになります。
$('.test > :checkbox').click(function() {
if ($(this).attr("checked")) {
alert("checked!!!");
} else {
alert("non checked!!!");
}
});
何が起こったのですか？このセレクタ$('.test > :checkbox')は、 "test"クラスの要素を見つけ、それに含まれるチェックボックスを表示します。
@Martin - 'for'属性のラベルは、添付されている要素のクリックイベントを発生させるためだと思います。したがって、jQueryコードでは、ラベルと入力の両方にクリックイベントハンドラを設定します。ラベルをクリックすると、ラベルに設定したクリックイベントハンドラが実行され、ラベルにクリックイベントが発生すると、入力に設定されたクリックイベントハンドラが実行されます。 –
UpVote！私は同じものを入力とラベルを使用して、divに変更して、それがなくなった –