Question

我的ajax功能有问题。代码如下：

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);
    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(this).html(msg);
    });
});
</script>

问题在于完成功能中的this。我在firefox中有firebug，这就是为什么我知道数据被返回，它应该显示，但它不会。我认为jQuery(this)是一个问题。有人知道如何在完成函数中使用this吗？

Answer 1

this内的{p> .done()指的是与您想要的this不同的对象。另外，请使用.on()代替.live()

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);
    var self = this;
    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(self).html(msg);
    });
});
</script>

您可以使用console.log(this)来查看它的不同之处。要详细了解this关键字，请查看this on MDN

Answer 2

jQuery(this)并没有完成你的功能，因为这是指ajax函数。我建议你保存你的对象prevoius并在打电话给他之后：

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var obj = this;
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);

    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(obj).html(msg);
    });
});
</script>

其他解决方案是保存id并在jQuery之后选择元素byId，但这不能直接用于你的函数

Answer 3

这是因为this未绑定到done()回调中的原始元素。相反，它绑定在$.ajaxSettings和您传递的AJAX选项之间的混合。

要保留原始上下文，您可以在传递给$.ajax()的this选项中指定context：

jQuery.ajax({
    context: this,
    type: "GET",
    url: "<?php echo get_permalink(177); ?>",
    data: {
        curPage: <?php echo $post->ID; ?>,
        id: cat
    }
}).done(function(msg) {
    jQuery(this).html(msg);  // Will work as expected.
});

Answer 4

你可以使用闭包：{只是另一种方式}

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function () {
    var cat = jQuery(this).parent().index() + 1;
    alert(cat);
    (function (self) {
        jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                curPage: <? php echo $post - > ID; ?> ,
                id: cat
            }
        }).done(function (msg) {
            jQuery(self).html(msg);
        });
    }(this));
});
</script>

jQuery在完成函数中使用它不起作用

4 个答案: