Question

我正在使用Wordpress AJAX来显示一些结果。该功能工作得很好，但在显示结果时$（this）不起作用。

我的代码如下：

<script type="text/javascript">
jQuery(document).ready(function () {
    $("a.review_status").live("click", function () {

        var id = $(this).attr("id");
        dataString = 'id=' + id;
        jQuery.ajax({
            type: "POST",
            url: "<?php echo $ajax_status_url; ?>",
            data: dataString,
            cache: false,
            success: function (html) {
                $(this).text(html);
            }
        });

    });
});
</script>

因为AJAX没有给我正确的结果。

Answer 1

ajax成功中的回调中的上下文发生了变化。成功功能中对this的引用指向成功函数本身，而不是指向被点击的元素。

解决此问题的方法是将this的引用存储为self。例如：

<script type="text/javascript">
jQuery(document).ready(function () {
    $("a.review_status").live("click", function () {

        var self = this;

        var id = $(this).attr("id");
        dataString = 'id=' + id;
        jQuery.ajax({
            type: "POST",
            url: "<?php echo $ajax_status_url; ?>",
            data: dataString,
            cache: false,
            success: function (html) {
                $(self).text(html);
            }
        });

    });
});
</script>

Answer 2

使用此代码代替上述代码：

<script type="text/javascript">
jQuery(document).ready(function () {
$("a.review_status").live("click", function () {
    var element = $(this);
    var id = $(this).attr("id");
    dataString = 'id=' + id;
    jQuery.ajax({
        type: "POST",
        url: "<?php echo $ajax_status_url; ?>",
        data: dataString,
        cache: false,
        success: function (html) {
            $(element).text(html);
        }
    });

});
});
</script>

Answer 3

尝试jQuery而不是$

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a.review_status").live("click", function () {
    var element = jQuery(this);
    var id = jQuery(this).attr("id");
    dataString = 'id=' + id;
    jQuery.ajax({
        type: "POST",
        url: "<?php echo $ajax_status_url; ?>",
        data: dataString,
        cache: false,
        success: function (html) {
            jQuery(element).text(html);
        }
    });

});
});
</script>

有时$（this）不能使用AJAX成功代码

3 个答案: