Ajax onchange 不起作用

Question

我有一个 Ajax 函数来检查 username 是否可用。但是，如果我使用按钮并单击功能，它就可以工作。我不想使用按钮。因此，我正在检查更改 username2 字段的可用性。但这是行不通的。没有 Ajax 调用正在进行。

$('#user_name2').change(function(){

    //$(".help-block1").hide();
    var user_name = $("#user_name2").val();
    var name = $("#u_name").val();
    //var hidd = $("#hidd").val();
    var baseurl = $("#site_url").val();

    if (user_name == '') {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">Enter a username first</b></p>');
    }
    else if (user_name == name) {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">This is current username</b></p>');
    }
    else {

        $.ajax({
            url: "" + baseurl + "user/check_user",
            async: false,
            type: "POST",
            dataType: "json",
            cache: false,
            data: {
                    user_name: user_name
            },
            success: function(response) {
                if (response.res_user == 'exist') {

                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Username alredy exist</b></p>');
                    $("#user_name2").focus();
                    $("#hidd").val('fail');
                }
                else if (response.res_user == 'available') {
                   $("#user_name2").after('<p class="help-block1"><b style="color:' + response.status + ';">Username available</b></p>');
                }
                else {
                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Error. Try again</b></p>');
                }
            }
        });
        //return false;
    }
});

HTML 部分在这里

<div class="form-group">
    <label for="exampleInputEmail1">User Name</label>
    <input type="text" maxlength="255" class="form-control" id="user_name2" placeholder="" value="' . $res[0]->u_name . '"required>
    <input type="hidden" id="u_name" value="' . $res[0]->u_name . '">
</div>

Answer 1

根据我的理解，您将事件绑定到 click。我认为您应该在change 上绑定您的活动。

有可能，对你有帮助。

请使用

$(document).ready(function(){
  $('#username2').live('change', function() {});
});
/* put select box id at the place of username2 */

Answer 2

使用 .on 代替 .live

$(document).ready(function() {

    $('#user_name2').on('change', function() {

    });
});

jQuery 1.9 .live() is not a function

演示：http://jsfiddle.net/avmCX/19/

注意：我测试了你的 siteurl 是未定义的，所以看看你在你的问题中发布的部分的代码

Answer 3

我建议这样做：

$(document).ready(function() {
    $('#user_check').change(function() {
        // your code here
    });
});

使用$('#user_check') 或$('#user_name2')，具体取决于您在编辑问题后在HTML 中设置的id。

还有

我认为您的HTML 无效。

你应该修复

value="' . $res[0]->u_name . '"

与

value="<?php echo $res[0]->u_name; ?>"

在你的<input>