0

そのdivの削除リンクがクリックされた後、divを削除しようとしています。div は、Web サイトが読み込まれた後に追加を使用して生成されます。

追加された HTML:

<div class="reviews">
<div class="row-fluid" id="57">
    <div class="span2">
        <img src="img/default_male.png" alt="Male Default Photo">
    </div>
    <div class="span10">
        <h6>Test Test</h6>
        <img class="rating-stars" src="img/2star.png" alt="2 Stars">
        <br>
        <p class="comment-info">
            <time class="timeago" datetime="2013-09-19 22:49:59" title="Thursday, Sep 19, 2013 - 10:49 PM">5 minutes ago</time>, 
            <a href="#removereview" class="removereview">remove</a>
        </p>
    </div>
</div>

私のJQueryコード:

            $(".reviews").on('click', '.removereview', function() {
            var review_id = $(this).parents('.row-fluid').attr('id');
            console.log(review_id);

            $.ajax({
                type: "POST",
                url: "event_send.php",
                data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
                success: function(response){
                    $(".review-count").html(parseInt($(".review-count").html()) - 1);
                    $(this).closest('.row-fluid').remove();
                }
            });

            return false;
        });

問題は、正しい ID がコードによって選択されているにもかかわらず、div が削除されないことです。問題を解決する方法についてのアイデアはありますか?

ありがとうございました

4

2 に答える 2

3

this成功ハンドラー内ではクリックされた要素を参照しないため、セレクター$(this).closest('.row-fluid')は要素を見つけることができません。

self1 つの解決策は、成功ハンドラー内で使用されるクロージャー変数を使用することです。

$(".reviews").on('click', '.removereview', function() {
    var review_id = $(this).parents('.row-fluid').attr('id');
    console.log(review_id);

    var self = this;
    $.ajax({
        type: "POST",
        url: "event_send.php",
        data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
        success: function(response){
            $(".review-count").html(parseInt($(".review-count").html()) - 1);
            $(self).closest('.row-fluid').remove();
        }
    });

    return false;
});

もう 1 つは、$.proxy()を使用してカスタム コンテキストを成功のコールバックに渡すことです。

$(".reviews").on('click', '.removereview', function() {
    var review_id = $(this).parents('.row-fluid').attr('id');
    console.log(review_id);

    $.ajax({
        type: "POST",
        url: "event_send.php",
        data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
        success: $.proxy(function(response){
            $(".review-count").html(parseInt($(".review-count").html()) - 1);
            $(this).closest('.row-fluid').remove();
        }, this)
    });

    return false;
});
于 2013-09-20T06:04:36.667 に答える