1

「表示」ボタンをクリックすると、表示リスナーが呼び出され、新しい非表示ボタンが表示されます。しかし、[非表示] をクリックしても非表示ボタンが呼び出されないのはなぜですか?

 $('.myCss').append('<input type="button" class="show" value="Show"/>');

$('.show').on('click', function () {
        console.log('show clicked');
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
});

    $('.hide').on('click', function () {
    console.log('hide clicked');
    $('.myCss').append('<input type="button" class="show" value="Show"/>');
    });
4

5 に答える 5

5

ページに追加される要素の順序に関係しています。show コード内に hide コードをドロップすると、動作します (ただし、ロジックを確認する必要があります)。

$('.show').on('click', function() {
    console.log('show clicked');
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
    $('.hide').on('click', function() {
        console.log('hide clicked');
        $('.myCss').append('<input type="button" class="show" value="Show"/>');
    });
});​

jsFiddle の例

元のコードでは、クリック イベントを非表示ボタンにバインドするコードは、実際の非表示ボタンの前に存在するため、実際には何にもバインドされていません。他のコード ブロック内に移動することで、そのチャンクの実行を遅らせます。.on()クリック イベントを DOM の上位のイベントにバインドするために使用することもできますが、最終的な結果は基本的に同じです。

ドキュメントから：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

于 2012-06-29T15:26:15.913 に答える
1

イベントを設定すると、.hide 要素が存在しないためです。次のようなイベントを設定してみてください。

$('.myCss').append('<input type="button" class="show" value="Show"/>');

$('.myCss').on('click', '.show', function () {
  console.log('show clicked');
  $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
});

$('.myCss').on('click', '.hide', function () {
  console.log('hide clicked');
  $('.myCss').append('<input type="button" class="show" value="Show"/>');
});

これにより、クリックが .myCss 要素にアタッチされます (shich は常に存在します) が、その中の .hide 要素でクリックが発生した場合にのみ関数が起動されます。

このソリューションは、要素が作成されるたびにイベントを作成するよりも効率的です。

于 2012-06-29T15:27:59.933 に答える
0

問題は、onclick イベントを定義しようとしたときに「非表示」ボタンが存在しないことです。それを追加し、display=none を設定してから表示することをお勧めします。

于 2012-06-29T15:26:51.383 に答える
0

「.hide」イベント ハンドラーが作成されるとき、「非表示」ボタンはまだ存在しません。

要素の作成後にイベント ハンドラーを設定するか、イベント バブリングを使用するか、.live を使用することができます。

于 2012-06-29T15:27:08.347 に答える
0

イベントがコントロールにバインドされた後に非表示ボタンが作成されると、何人かの人々が正しく答えました。より高いレベル (私の例ではドキュメント) でハンドラーを使用する別のアプローチを提案します。これは、将来のコントロール (現在は廃止された.liveへの現在のアプローチ) にアタッチされます。

例: http://jsfiddle.net/kQ2JA/1/

これは、イベントを現在および将来のすべてのコントロールにバインドするという期待に一致します。

于 2012-06-29T15:28:57.693 に答える