javascript - 如何在 ajax 成功函数内的单击事件处理程序上更改 Jquery 中按钮的文本

Question

我通常会自己解决问题，但这一次让我度过了一段非常困难的时期。我需要在单击按钮后更改由 php 从数据库创建的表中按钮的文本值。

        <td id="order_num"><?php echo $order -> order_num; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>
        <td><?php echo $order -> data; ?></td>

        <!-- **** this is the button. ******** -->          
        <td><button type="submit" class="accept_order" id ="row_<?php echo $order -> order_num; ?>" 
        data-row_id = "row_<?php echo $order -> order_num; ?>" data-current_user = "<?php echo $user_id; ?>" 
        data-order_num = "<?php echo $order -> order_num; ?>">Accept</button> 

这是一个 ajax 调用的大困惑

$(文档).ready(function () { $('.shop').on('点击', '按钮', 函数(e){

        var button = $(this).find('button'); //trying to put the value of the current button in a variable to pass to the ajax function.                                        
        var current_user = $(this).closest('.shop').find('.accept_order').data('current_user');
        console.log(current_user);
        var row_id = $(this).closest('.shop').find('.accept_order').data('row_id');


        var accepted_order = $(this).closest('.shop').find('.accept_order').data('order_num');
        console.log(accepted_order);
        e.preventDefault();

        $.ajax('url', {
            type: "POST",

            data: { order_id: accepted_order, user_id: current_user },
            success: function(msg){
                console.log(msg);
                console.log(this);
                //change the text of the button to something like "accepted"

                ***************this is where I have problems ***********************
                $(this).html('accepted'); or
                $(this).closest('.shop').find('button').html(msg); or
                button.text(msg);



            },
            error: function(){
                 $(this).closest('.shop').find('.accept_order').html("failure");
            }
        });


    });
});

</script>

我确实使用了 $('button').html(msg);但这改变了所有按钮。当我在成功函数内时，似乎失去了对象的范围。任何想法或帮助将不胜感激。提前致谢。

Answer 1

我相信我找到了你的问题根源，但我不确定。问题来自 this 关键字，因为 ajax 函数中的 this 直接指向 ajax 对象而不是按钮节点对象。因此，您可以在 success 和 error 函数中使用 bind 函数来使 this 指向按钮。这是修改:

另一件事是ajax函数中的url是一个变量，而不是上面写的字符串。

$.ajax(url, {
        type: "POST",
        data: { order_id: accepted_order, user_id: current_user },
        success: function(msg){
            console.log(msg);
            console.log(this);
            //change the text of the button to something like "accepted"

            ***************this is where I have problems ***********************
            $(this).html('accepted'); or
            $(this).closest('.shop').find('button').html(msg); or
            button.text(msg);



        }.bind(this),
        error: function(){
             $(this).closest('.shop').find('.accept_order').html("failure");
        }.bind(this)
    });

我不确定解决方案，因为没有针对您询问的问题的演示。

希望它能起作用。