Question

我有这个HTML结构...

<div class="comments">
    <div class="like_result"></div>
    <div class="all_comments" style=" max-height: 300px;   overflow: scroll; overflow-x: hidden;">      
    </div>
    <form action="" method="get" accept-charset="utf-8" class="send_comment">
        <div class="row">                       
            <div class="col-md-10">                         
                <textarea name="comment_message" class="form-control comment_text" placeholder="Write your comment"></textarea>
            </div>
            <div class="col-md-1">
                <input type="submit" name="submit" value="Send" class="btn btn-primary">
                <input type="hidden" class="post_id" name="post_id" value="<?php echo $post->posts_id; ?>">
            </div>                      
        </div>
    </form>
</div>

现在，在Ajax上成功调用后，我想使用以下代码将数据加载到名为all_comments的类中：

$(this).parents(".comments").find(".all_comments").html(data);

，但无法加载或正常工作。

你能告诉我该怎么做吗？

已更新：

我正在使用的jQuery代码：

$(".send_comment").submit(function(e) {
    e.preventDefault();     
    var that = $(this);
    $.ajax({
        url : 'save-comment.php',
        type : 'POST',
        dattType : 'html',
        data : $(this).serialize(),
        success : function ( data ) {
            // that.prev(".all_comments").append( data );
            // that.find(".comment_text").val(' ');
            // refresh();   
            $(this).parent(".comments").next(".like_result").next(".all_comments").html(data);
        }
    });
});

Answer 1

尝试使用that变量和siblings()选择器

that.siblings('.all_comments').html(data);

注意： this在Ajax回调中不起作用

Answer 2

在使用$(this)的上下文中，它不再引用触发初始事件的元素。每当您声明一个新函数时，this都会改变含义。 ^{*（箭头功能对此是一个例外）}

我建议在this更改范围之前将元素存储为变量，但是实际上您已经在这样做了：

var that = $(this);

您只需要使用它。我还对选择器进行了一些更改，以使其更适应您可能决定进行的HTML更改。

that.closest(".comments").find(".all_comments").html(data);

建议：如果要存储jQuery元素，请在变量前加一个美元符号。没有功能上的区别，但是为了可读性我建议遵循公认的惯例。

var $that = $(this);

$that.closest(".comments").find(".all_comments").html(data);

Answer 3

您可以尝试以下脚本：

$(document).ready(function(){
$(".btn-primary").click(function(){
//after ajax 
var $that = $(this);
var data='<div>Results</div>';
$(this).parent().parent(".comments").find('.all_comments').html(data);
});
});

您可以在此fiddle上对其进行测试。我已经尝试过并且对我来说很好。

希望对您有帮助。

Answer 4

您可以保存$（“。send_comment”）选择器的引用，而不是使用$（this）。这样，您无需重新选择它，也无需在响应中使用它来找到另一个选择器（相对于它）：

select v.sr_name
    , v.workdate
    , v.hoursworked
    , u.ServRepID
    , u.calls
    , u.reaches
    , u.books
    , u.attends
from
(
    select s.sr_name
        , cast(punchdatetime as date) as workdate
        , ((datediff(second, min(case when p.InOut = 1 then punchdatetime end), max(case when p.InOut = 0 then punchdatetime end))/3600) - .5) as hoursworked
    from PunchClock p 
    join ServiceReps s on p.ServRepID = s.ServRepID
    where punchyear >= 2019
    group by s.sr_name
        , cast(punchdatetime as date)
) v
join 
(
    select sr_name
        , t.*
        , calls = 
                (
                    select count(*) 
                    from CRM_Correspondence cr 
                    where cast(cr.DateCreated as date) = workdate 
                        and StatusType like '%call%' 
                        and cr.ServRepID = t.servrepid
                )
        , reaches = 
                (
                    select count(*) 
                    from CRM_Correspondence cr 
                    where cast(cr.DateCreated as date) = workdate 
                        and (StatusType = 'call reached' or StatusType like '%SCHEDULE%') 
                        and cr.ServRepID = t.servrepid
                )
        , books = 
                (
                    select count(*) 
                    from os_appointments o 
                    where cast(o.DateCreated as date) = workdate  and isnull(o.confirmedby, o.booked_by) = t.servrepid
                )
        , attends = 
                (
                    select count(*) 
                    from os_appointments o 
                    where cast(o.DateCreated as date) = workdate
                        and isnull(o.confirmedby, o.booked_by) = t.servrepid 
                        and o.appointmentStatus = 'attended'
                )
    from
    (
        select cast(cor.datecreated as date) workdate
            , cor.ServRepID
        from CRM_Correspondence cor
        where cor.datecreated > '2019-01-01'
        group by cast(cor.datecreated as date)
            , cor.servrepid
    ) t
    join ServiceReps sr on t.ServRepID = sr.ServRepID
) u on v.sr_name = u.sr_name 
    and v.workdate = u.workdate

Answer 5

请尝试以下操作：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>

<div class="comments">
    <div class="like_result"></div>
    <div class="all_comments" style=" max-height: 300px;   overflow: scroll; overflow-x: hidden;">      
    </div>
    <form action="" method="get" accept-charset="utf-8" class="send_comment">
        <div class="row">                       
            <div class="col-md-10">                         
                <textarea name="comment_message" class="form-control comment_text" placeholder="Write your comment"></textarea>
            </div>
            <div class="col-md-1">
                <input type="submit" name="submit" value="Send" class="btn btn-primary">
                <input type="hidden" class="post_id" name="post_id" value="">
            </div>                      
        </div>
    </form>

</div>
<script>

    $(".send_comment").submit(function(e) {
    e.preventDefault();     
    var that = $(this);
    $.ajax({
        url : 'http://localhost/save-comment.php',
        type : 'POST',
        dattType : 'html',
        data : $(this).serialize(),
        success : function ( data ) {
            // that.prev(".all_comments").append( data );
            // that.find(".comment_text").val(' ');
            // refresh(); 
            $(that).parent().find('.all_comments').html(data);
        }
    });
    });

</script>

Answer 6

jQuery具有将this（或任何其他元素）传递给ajax回调的内置方法，它是context选项，因此如果要将.send_comment传递给success回调，请使用context : this，这样您就可以使用$(this)作为对该.send_comment类的引用。

$(".send_comment").submit(function(e) {
e.preventDefault();
$.ajax({
    url : 'save-comment.php',
    type : 'POST',
    dataType : 'html',
    context : this, // pass "this" here
    data : $(this).serialize(),
    success : function ( data ) {
        // that.prev(".all_comments").append( data );
        // that.find(".comment_text").val(' ');
        // refresh();   
       // $(this) now will refer to the current selected ".send_comment" element     
       $(this).parent(".comments").next(".like_result").next(".all_comments").html(data);
    }
  });
});

jQuery选择DOM树

6 个答案: