4

2 つのラジオ ボタンに割り当てられているクリック ハンドラーの非常に単純なjsFiddle の例を作成しました。

    $(document).ready(function () {
        $(".title").on("click", function (event) {
            alert('clicked');
        });
    });

ご覧のとおり、ラジオ ボタンが選択されるたびにハンドラーが 2 回呼び出されるのはなぜですか?

<label class="title">
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool
</label>
<label class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</label>
4

7 に答える 7

6

title両方のラベルでクラスを使用しています。つまり、両方のラジオ ボックスで使用されています。クリックすると、両方のラジオ ボックスでイベントが発生します。ラジオボタンセレクターを使用して作業を行う必要があります。

$(document).ready(function () {
    $(":radio").on("change", function (event) {
        alert('clicked');
    });
});

デモ

参照変更

クリックで

$(document).ready(function () {
    $(":radio").on("click", function (event) {
        alert('clicked');
    });
});

デモ

于 2013-09-13T13:42:23.247 に答える
1

変更イベントを使用します。それはうまくいきます。

$(document).ready(function () {
    $(".title").on("change", function (event) {
        alert('clicked');
    });
});
于 2013-09-13T13:42:59.163 に答える
1

試す

$(".title input").on("click", function (event) {
  alert('clicked');
});
于 2013-09-13T13:43:14.813 に答える
1

これは、<input>タグがタグ内にあるために発生します<label>。ラベルをクリックするとラジオのクリックもトリガーされるため、基本的にラジオを 2 回クリックすることになります。

<input>タグをタグの外に移動して<label>も問題ありません。

于 2013-09-13T13:43:21.357 に答える
0

<label>label をクリックするとラジオもクリックされ、その逆も同様であるため、問題が発生しています。に変更<label>すると<p>、この問題は解決されます: DEMO HERE

<p class="title">
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool
</p>

<p class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</p>

または、次のようにクリックイベントのみを入力に追加してみてください:

$(document).ready(function () {
    $(".title input[type='radio']").on("click", function (e) {
        alert('clicked');
    });
});
于 2013-09-13T13:41:41.753 に答える
0

titleこれは、要素 Iの範囲に関係しています。

クラスを入力に追加し、イベントをそれにバインドすると、正しく機能します。

HTML:

<label class="title">
    <input type="radio" class='checkbox' name="heading" checked="checked" />Introduction and General Information about the Marketing Tool</label>
<label class="title">
    <input type="radio" class='checkbox' name="heading" />Implementation Steps of the Marketing Tool</label>

脚本：

    $(document).ready(function (e) {
        $(".checkbox").on("click", function (event) {
            alert('clicked');
        });
    });

フィドル

于 2013-09-13T13:45:04.570 に答える
-1

いくつかの変更を行い、正常に動作しています...コードは正しいですが、ここにあなたの例があります

    $(document).ready(function () {
        $("input[type=radio]").on("click", function (event) {
            alert('clicked');
        });
    });
于 2013-09-13T13:45:21.100 に答える