4

私はこのサイトでデモを作成しようとしています。私は問題を抱えています。コードは次のとおりです。

jQuery(document).ready(function() {
  jQuery(".content").hide();
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
  });
});

var el = document.createElement('div');
el.className = "heading";
el.innerHTML = "whatever you want";
$('.listResults').append(el);

var el2 = document.createElement('div');
el2.className = "content";
el2.innerHTML = "whatever you want shown";
$('.listResults').append(el2);
jQuery(".content").hide();

listResultsHTMLには、すべてが追加されるクラスが呼び出されたdivがあります。現在、JavaScriptはロード後に実行されているため、生成されたらjQuery.hideonを呼び出して.contentいます。

問題は、ヘッダーdivの1つをクリックしても、コンテンツがドロップダウンされないことです。何か案は？

4

3 に答える 3

2

これを試して

$('.listResults').on('click', '.heading',  function(){
    // whatever you want
});

var el = $('<div/>', {
    'class' : 'heading',
    'html' : 'whatever you want'
});
$('.listResults').append(el);

デモ。

または、これを試すこともできます

var el = $('<div/>', {
    'class' : 'heading',
    'html' : 'whatever you want',
    'click' : function(){
        // whatever you want, you can use $(this)
    }
});

$('.listResults').append(el);

デモ。

更新：これにより、divごとに個別のイベントハンドラーが作成され、より多くのメモリを消費するため、お勧めしませんが、divがいくつかある場合に使用できます。

Demo-1を更新し、Demo-2を更新しました。

于 2013-02-24T22:52:32.577 に答える
1

1.9で減価償却され、削除されたライブメソッドは使用しません。最適なオプションは、divを作成するときに「on」メソッドを使用することです。http://api.jquery.com/on/

于 2013-02-24T22:50:36.547 に答える
1

実行時にdivを作成しているので、ライブバインディングを使用します。ここで、ライブについてお読みください。

http://api.jquery.com/live/

于 2013-02-24T22:44:46.980 に答える