Question

我的工作代码中有三个部分：

一个PHP文件，
一个jQuery代码部分，其中包含一个请求的AJAX函数，
另一个PHP文件。

响应是一个HTML部分，它应该放在第一个PHP文件中的DIV之前（使用PHP的<script>部分内的<head>标记中的jQuery部分请求AJAX文件。

我的查询是当AJAX在所需的DIV元素id="content"中成功动态地预先添加HTML时，以响应HTML元素标记为目标的其他点击事件无法动态运行。
可能是什么原因？

$(".update_button").click(function (){
    var updateval = $("#update").val();
    var cate = $("#selectcategory").val();
    var up = $("#uploadvalues").val();
    if (up)
    {
        var uploadvalues = $("#uploadvalues").val();
    }
    else
    {
        var uploadvalues = $(".preview:last").attr('id');
    }
    var X = $('.preview').attr('id');
    if (X)
    {
        var Z = X + ',' + uploadvalues;
    }
    else
    {
        var Z = 0;
    }
    var dataString = 'update=' + updateval + '&Category=' + cate + '&uploads=' + Z;
    if ($.trim(updateval).length == 0 || $("#selectcategory").val() === "")
    {
        if ($.trim(updateval).length == 0)
        {
            alert('Please Enter SOME TEXT!');
        }
        else if ($("#selectcategory").val() === "")
        {
            alert('Choose a Category from the list!');
        }
    }
    else
    {
        $.ajax({
            type: "POST",
            url: $.base_url + "message_ajax.php",
            data: dataString,
            cache: false,
            success: function (html)
            {
                $("#flash").fadeOut('slow');
                $(".teacherpost").prepend(html);
                $("#update").val('').focus();
                $("#selectcategory").val('');
                $('#preview').html('');
                $('#uploadvalues').val('');
                $('#photoimg').val('');
                $(".decoration").hide();
            }
        });
    }
    return false;
});

从AJAX resposne开始的HTML：

<div class="post-description">
    <div class="stats">
        <div class="st_like_share">
            <a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" style="color:#F16522;"></i><?php  echo  $like_count; ?></a>
            <?php  } else {    ?>  
            <a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" ></i><?php echo  $like_count;  ?></a>              
            <?php } ?>                                         
            <a href="javascript:void(0)" class="stat-item remark" data-id="<?php 
                echo $msg_id;?>"  title='Give your Remarks on it'>
            <i class="fa fa-comments-o icon"></i><?php echo  $remark_count;  ?>
            </a>                          
            <a href="javascript:void(0)" class="stdelete stat-item" data-id="<?php echo $omsg_id;?>"  rel="" title="Delete Post">
            </a>
            <?php }  
                ?>
        </div>
    </div>
</div>
<div class="post-footer" id="post-footer-<?php echo $msg_id;?>">
    <textarea name="comment" class="form-control add-comment-input" id="ctextarea<?php echo $omsg_id;?>" style="width:100%;" placeholder="Add a remark here..."></textarea>
    <span class="input-group-btn">
        <input type="submit"  value="Remark" name="Remark"  id="<?php echo $omsg_id;?>" rel="<?php echo $msg_id;?>" class="btn btn-info pull-right Remark_button">
        <!--<input  type="submit" id=""  value="Send" class="btn btn-default go-chat pull-right ">-->
    </span>
    <?php if($remark_count>0)   { ?>
    <ul class="comments-list" id="commentload<?php echo $msg_id;?>">
        <?php include('comments_load.php'); ?>
    </ul>
    <?php } ?>
</div>
</div>

没有使用AJAX的jQuery回复了HTML代码：

/*Remark Load */
$(".stat-item.remark").on("click", function( e ) {
    var post_footer_id = "#post-footer-"+$(this).data('id');
    $(post_footer_id).slideToggle();
});

动态地这不起作用，但是当我刷新页面时，这个jQuery工作正常。

Answer 1

试试这个

$(document).on('click', '.stat-item.remark', function(){ 
         var post_footer_id = "#post-footer-"+$(this).data('id');
      $(post_footer_id).slideToggle();
  });

Answer 2

$.ajax({
    type: "POST",
    url: $.base_url + "message_ajax.php",
    data: dataString,
    cache: false
})
.done((data) => {
    //on success code here
})
.fail((jqXhr) => {
    //on failure code here
    //jqXhr.responseJSON
});

Jquery没有处理AJAX响应

2 个答案: