Jquery $(this).attr('id')给出未定义的结果

jquery $(this).attr('id') is giving undefined result

本文关键字：未定义 结果 id attr Jquery this      更新时间：2023-09-26

我试图获取元素更改的id的详细信息。但是当我试图使用下面的代码找到它时，它给出了错误。

HTML: 

<input type="text" required="required" placeholder="Enter city name" class="get_neighborhood" maxlength="30" id="city" value="P" name="city" data-invalid="">
<input type="text" placeholder="State code" maxlength="2" class="get_neighborhood" required="required" id="state" value="AA" name="state">

JS: 

$(document).ready(function() {
    $(".get_neighborhood").on('change',function() {
        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';
        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                
            },
            success: function(output_value) {
                myid = $(this).attr('id');                
                //var id=this.id;
                console.log(myid.toSource());
            },
            error: function(output_value) {
                alert('err');                    
            }
        });
    });
});

给出myid未定义的错误。

尝试在ajax调用之外缓存$(this)引用，并在其中使用它。

完整代码: 

$(".get_neighborhood").on('change',function() {
        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';
        _this = $(this);
        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                
            },
            success: function(output_value) {
                myid = _this.attr('id');                
                //var id=this.id;
                console.log(myid.toSource());
            },
            error: function(output_value) {
                alert('err');                    
            }
        });
});

在ajax中，你失去了元素事件上下文，所以你不能在ajax中访问它，你需要做的是将它的id存储在事件后的变量中，并在成功时使用它:

$(".get_neighborhood").on('change',function() {
        city = $('#city').val();
     var Id = this.id;
     //or
    var element = $(this);
......
.....
success: function(output_value) {
                myid = Id;            
}

或存储元素引用并使用如下:

$(".get_neighborhood").on('change',function() {
        var element = $(this);
    ......
    .....
    success: function(output_value) {
                    myid = $(element).attr("id");            
    }

在错误的上下文中使用了$(this)。将事件源存储在某个变量中，并在成功时使用它。

$(document).ready(function() {
    $(".get_neighborhood").on('change',function() {
        source = $(this); //Store $(this);
        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';
        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                
            },
            success: function(output_value) {
                myid = source.attr('id'); //Use source here.                
                //var id=this.id; 
                console.log(myid.toSource());
            },
            error: function(output_value) {
                alert('err');                    
            }
        });
    });
});
相关文章：