2

ページの読み込み時に、ページの読み込み時に非表示になっているコンテンツにイベント ハンドラーをバインドします。

ユーザーがボタンをクリックすると、非表示のコンテンツがプルされ、ページのメイン コンテンツが置き換えられます。最初にバインドされたイベント ハンドラーが機能しなくなります。

ページ読み込み時の HTML コード

<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>

ユーザーがボタンをクリックすると、新しい dom は次のようになります。

<p>
 <div>Some Hidden content</div>
</p>

操作後、div 要素にバインドされたイベント ハンドラーは機能しなくなります。DOM 操作の後、div が P 要素に入ることに注意してください。

jQuery コード:

   $('#button').click(function(){
      var show_later = $('.show-later').html();
      $('p').html(show_later);
   });

   $(document).ready(function(){
      $('.show-later').click(function(){
       // Do something.....
      });
   });
4

3 に答える 3

2

を移動するのではなく<div>、そのコンテンツ (テキスト ノード) を取得して段落にコピーするだけです。質問で述べたこととは反対に、結果の DOM は実際には次のようになります。

<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>

は<div>まだ存在し、コンテンツもあり、イベント ハンドラーがclickバインドされています。しかし、まだ非表示になっているため、クリックすることはできません。

<div>次のように、実際に<p>要素に移動することをお勧めします。

$('.show-later').show().appendTo('p');

これにより、 が選択さ<div>れて表示され、要素自体が に移動します<p>。

于 2012-12-18T09:37:48.413 に答える
1

もしあなたがそうするなら

var show_later = $('.show-later').html();
$('p').html(show_later);

にバインドされたイベント ハンドラは にバインドされなく.show-laterなりpます。の内容を変更するだけですp。HTML を次のように変更することをお勧めします。

<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>

およびJavaScript自体：

$('.show-later').show();
$('.hide-later').hide();
于 2012-12-18T09:43:19.410 に答える
1

このようにコードを変更しようとしましたか?

$(document).ready(function(){
    $(document).on('click', '.show-later', function(){
        // Do something.....
    });
});

Update2 :

$('#button').click(function(){
    var show_later = $('.show-later').html();
    $('p').html(show_later).addClass('show-later');
});

Update1 : あなたの問題が正確に何であるかわかりません。jsfiddle-example を作りたいと思うかもしれません...

「on」メソッドはイベントを登録するため、要素を削除して新しい要素を作成しても、イベントは既に登録されています。

于 2012-12-18T09:43:26.710 に答える