0

私は現在構築しているソーシャルネットワーク上にウォールポスティングシステムを持っています。これはjQueryとAjaxを使用してメッセージをウォールに投稿し、phpがメッセージをDBに保存します。投稿が壁に表示された後、「コメント」と「いいね」のリンクがあります。「コメント」リンクをクリックしたときにコメントボックスを表示しようとしていますが、JavaScriptで要素にアクセスできないようです。

ウォールポストを表示するコードは次のとおりです。

var wall_post = '<li><div class="user_activity_feed_item_user_pic"><img src="images/temp/prof_pic_temp.jpg" class="avatar"></div><div class="user_activity_feed_item_title"><a href="proflie-view.php">Tyler Bailey</a></div> <div class="user_activity_feed_item_content"><p class="activity_feed_text">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div><div class="user_activity_feed_item_comment_bar"><ul> <li class="activity_feed_timestamp">July 16, 2012 2:08pm</li> <li><a id="comment" href="#">Comment</a></li><li><a id="like" href="#like_view">Like</a></li></ul></div></div></li>';

でアクセスするために使用しようとしたコードは次の<a id="comment" href="#">とおりです。

 //initiate comment box for status feeds
$(document).ready(function(){
    $('#comment_wrapper').hide();

    $('a#comment').click(function(){
        $('#comment_wrapper').show();
    });
});

これを機能させる方法についてのアイデアやヒントをいただければ幸いです。

4

3 に答える 3

3

on()たとえば、次のようにイベント委任を使用するだけです。

var listEl = $('ul'); // parent of the newly added li element
listEl.on('click', 'a', function(e){
    e.preventDefault();
    // do something in response to a click on a link from within
    // the newly-added content.
});

JS フィドルのデモ。

on()覚えておくべき重要なことは、メソッドをバインド、割り当て、または委任する要素は、バインド/割り当ての時点で DOM に存在する必要があるということです。そのため、DOMReady または onLoad のドキュメントに存在する、新しく追加された要素の最も近い親要素を操作します。

于 2012-08-01T19:36:29.547 に答える
1

（古いバージョンのjQueryを使用している場合はonフォールバック）を使用して、いいねボタンまたはコメントボタンのすべてのクリックイベントをリッスンできます。delegate

var comment_wrapper = $("#comment_wrapper");
comment_wrapper.hide();

$(document).on("click", ".comment", function() {
    comment_wrapper.show();
});

またはliveを提供しないはるかに古いバージョンのjQueryを使用している場合を除いて、使用しないでください。私が正しく覚えているなら、それは、複数の要素から来るイベントをリッスンするための（メソッドを除いて）イベントリスナーの中で最も効率が悪いです。ondelegatebind

また、ページ上にIDを持つ要素が複数ある場合は、IDを使用しないでください。IDはドキュメント全体で一意である必要があります。

于 2012-08-01T19:37:54.697 に答える
0

リンクは動的に生成されるため、live（）を使用します

$('a#comment').live("click", function(event){

//your
//actions here


});
于 2012-08-01T19:37:34.260 に答える