2

ユーザーが #postComment リンクをクリックするたびにコメントを送信しなければならない状況があります。

このコードでは、最初のコメントは正常に送信されますが、2 回目は送信されません。これは、jquery が適切ではなく、ここで混乱しているためだと思います $('.comment a')。

「this」キーワードまたはその他の可能な解決策を使用して、これらの種類の変数にアクセスする方法を知りたいです。

コメントが送信されるたびに、newCommentBox 変数が commentWrapper に追加され、新しい commentBox が生成されます。

Jクエリ:

 $('.comment a').click(function(){


comment="<pre>"+$('textarea').val()+"</pre>";
newcommentBox="<div class='CommentBox'>"
        +"<div class='dp'><img src='../Images/defaultPic.jpg' width='50' height='50' /></div>"
        +"<div class='name'>Muazzam Ali</div>"
        +"<div class='comment'>"
        +"<textarea cols='70' rows='10'></textarea><br />"
            +"<a href='javascript:void(0)' id='postComment'><img src='../Images/commentbutton.png' height='30' width='90' /></a>"
        +"</div>"
    +"</div>";

$(this).prev().html("");
$(this).hide();

$(this).parent().html(comment);
$('#CommentWrapper').append(newcommentBox);

});

HTML:

    <div id="CommentWrapper">
          <div id="CommentHeading">Comments:</div>
    <div class="CommentBox">
        <div class="dp"><img src="../Images/defaultPic.jpg" width="50" height="50" /></div>
                <div class="name">Muazzam Ali</div>
                <div class="comment">Comment</div>
                </div>

    <div class="CommentBox">
        <div class="dp"><img src="../Images/defaultPic.jpg" width="50" height="50" /></div>
        <div class="name">Muazzam Ali</div>
        <div class="comment">
        <textarea cols="70" rows="10"></textarea><br />
            <a href="javascript:void(0)" id="postComment"><img src="../Images/commentbutton.png" height="30" width="90" /></a>
        </div>
    </div>
</div>
4

3 に答える 3

1

コメント送信ボタンを表すclick新しい要素にイベント ハンドラーを追加していないため、2 回目にコメントを追加することはありません。a実際には、この新しく作成された要素にイベント ハンドラーを再度追加する必要があります。または、メソッドを使用して jQuery の委任機能を使用しon、イベント ハンドラーが常にa要素に追加されるようにします。

しかし、個人的には、これは私が代わりに行うことです。更新された JavaScript は次のとおりです。

$('.comment a').click(function _this (){

    comment = "<pre>"+$('textarea').val()+"</pre>";
    newcommentBox = "<div class='CommentBox'>"
        +"<div class='dp'><img src='../Images/defaultPic.jpg' width='50' height='50' /></div>"
            +"<div class='name'>Muazzam Ali</div>"
            +"<div class='comment'>"
                +"<textarea cols='70' rows='10'></textarea><br />"
                +"<a href='javascript:void(0)' id='postComment'><img src='../Images/commentbutton.png' height='30' width='90' /></a>"
            +"</div>"
        +"</div>";

    $(this).prev().html("");
    $(this).hide();

    $(this).parent().html(comment);
    $('#CommentWrapper').append(newcommentBox);
    $('#CommentWrapper').find(".comment a").click(_this);

});

ここで行っているのは、渡す関数式$(".comment a").click()に name という名前を付けることです_this。関数に付けたこの名前は、関数自体の内部でのみ使用できます。コメントが作成されるたびに、次の a要素のクリック イベント ハンドラーとしてアタッチされます。また、パフォーマンスが低下する可能性があるイベント委譲の使用を回避できます。（そういうのが気になる方はどうぞ。）

于 2012-05-11T19:53:33.873 に答える
0

デリゲートを使用してみてください（jQuery 1.7を想定）

$(document.body).on("click", ".comment a", function(e) {
 // handle event
});
于 2012-05-11T19:57:45.600 に答える
0

問題は、クリック イベントにコールバックをアタッチした後に新しいボタンを追加していることにあると思います。

$(".comment a").click(function()...)を次のように置き換えてみてください。

$(".comment a").live("click", function()...);新品にも付いてます

于 2012-05-11T20:04:09.630 に答える