如何在AJAX成功中使用$(this)?

时间:2018-03-01 02:45:58

标签: jquery ajax sweetalert

表格的每一行都有按钮。当用户单击它时,会触发sweetalert以显示确认窗口。如果用户单击“是”,则执行AJAX以发布行值。

后期处理工作正常,但我无法在AJAX成功调用后更改按钮属性和标签文本。这是我的剧本。

$("#tbl_list_pemenuhan tbody").on('click','.btn_memo', function() {                 

    var no_penuh    = $(this).closest('tr').find("td:eq(1)").text();
    var no_minta    = $(this).closest('tr').find("td:eq(2)").text();

    var data        = 'no_pnh='+no_penuh+'&no_mnt='+no_minta;


    swal({
        title               : "Apa anda yakin?",
        type                : "warning",
        showCancelButton    : true,
        confirmButtonColor  : "#0C0",
        confirmButtonText   : "Ya!",
        cancelButtonText    : "Batal",
        closeOnConfirm      : true
    },function(){

        var elem = $(this);

        $.ajax({
            type    : "POST",
            url     : "<?php echo site_url('con_atk/buat_memo_direct'); ?>",                        
            data    : data,                     
            success : function(data){   
                elem.attr('disabled','disabled');
                elem.closest('tr').find('label').text('SENT');

                alert("SUCCESS");
            }
        });             
    });     
});

请注意: 在AJAX成功中,警报被执行但不是elem

2 个答案:

答案 0 :(得分:1)

问题原因

函数声明您拥有自己的this,因此使用$(this)不再获取触发事件的元素。

解决方案1 ​​

在内部var elem = $(this);(包含ajax调用的那个)之外定义function()

解决方案2

bind末尾的

this function() { ... }.bind(this)

解决方案3(ES6)

箭头功能没有自己的this,因此function()替换()=>也可以完成这项任务,但只有在支持ES6的浏览器中运行它(或者如果你“使用像Babel这样的转录器。”

答案 1 :(得分:0)

您还可以获取事件对象:

$("#tbl_list_pemenuhan tbody").on('click','.btn_memo', function(event) {

然后使用:

var elem = $(event.target);