1

次のコードとフィドルを見てください。

コード

$("#enable").click(function(e) {
    if (!$("#enable").data('isOn')) {
        $("#holder").find('.clickable').each(function(d) {
            $(this).css('border', '1px solid red');
            $(this).addClass('clickEnabled');
        });
        $("#enable").data('isOn', true);
    } else {
        $("#holder").find('.clickable').each(function(d) {
            $(this).css('border', '');
            $(this).removeClass('clickEnabled');
        });
        $("#enable").data('isOn', false);

    }

});

$(".clickEnabled").click(function(e) {
    alert('clicked');
});

フィドル： http： //jsfiddle.net/qAuwt/

私は基本的に、ボタンが押されたときに要素の「clickEnabled」クラスを切り替えようとしています。境界線が変更されているため、トグルは機能していますが、clickEnabledクラスはクリックイベントに応答していません

4

3 に答える 3

2

.clickEnabledイベントハンドラーを設定する場合、要素はありません。ただし、クリックイベントは引き続きキャッチできます。

$(document).on("click", ".clickEnabled", function(){
    alert("Hello, world!");
});​
于 2012-07-25T17:11:30.767 に答える
1

変化する：

$(".clickEnabled").click(function (e) {
    alert('clicked');   
});

に：

$(".clickable").click(function (e) {
    if ( $(this).hasClass("clickEnabled") )
    {
        alert('clicked');   
    }
});

@araxanasが述べたように、.clickEnabledロード時に存在しません。そこで、セレクターをに切り替えました.clickable。ただし、クリックを処理するのは、クリックが有効になっている場合のみです。そのため、条件付きを追加しました。clickEnabledクリックされた要素にクラスがある場合にのみアラートが表示されます。

また、cssをjavascriptから移動すると役立つ場合があります。そうすれば、クラスが存在するかどうかを視覚的に確認できます。更新されたフィドルを参照してください。

于 2012-07-25T17:15:30.830 に答える
-1

問題は、ページが読み込まれると、クリックイベントハンドラーが要素にバインドされないことです（クラス'clickEnabled'の要素がないため）。

解決策は、.click（）メソッドを.live（）メソッドに変更することです。

$(".clickEnabled").live('click', function (e) {
    alert('clicked');
});
于 2012-07-25T17:17:43.060 に答える