编辑文本框时如何调用jQuery函数答案

【问题标题】：How to call a jQuery function when textbox is edited编辑文本框时如何调用jQuery函数
【发布时间】：2016-10-27 08:53:33
【问题描述】：

在我的代码中，有一个文本框被禁用。当用户点击编辑铅笔图标文本框启用编辑内容。当用户编辑文本框时，它必须检查编辑的值是否已经退出。为此，我调用了 checkOwnerId 方法。但是没有任何调用该函数。

这是我的 jQuery 代码

  var parcel = $('#parcel_no').val();
        $('#pin-edit').click(function () {
            $('#owner_id_txt').removeAttr("disabled");
            $("#pin-edit").hide();
            $("#save-pin").show();
            oldOwnerId = $('#owner_id_txt').val();
        });
        $('#save-pin').click(function () {
            if ($("#owner_id_txt").val() == "") {
                displayErrorMessage('Please enter owner Id');
                $("#owner_id_txt").focus();
                $('#owner_id_txt').val(oldOwnerId);
                return;
            }


            $("#pin-edit").show();
            $('#owner_id_txt').attr("disabled", true)
            $("#save-pin").hide();
            var data = { 'owner_id': $("#owner_id_txt").val(), 'parcel_no': parcel };
            BlockUI();
           var urlstring = "@Url.Content("~")Parcel/UpdateOwnerId";
            $.post(urlstring, data, function (result) {
                UnblockUI();
                if (result.success == true) {
                    displaySuccessMessage('Owner Id updated successfully!');

                }
                else {
                    displayErrorMessage('There was an error while updating Owner Id!');
                }
            });

            $('#owner_id_txt').change(function () {
//alert("Check Exist or Not");
                       var data = { 'owner_id': $("#owner_id_txt").val() };
                        var urlString = "@Url.Content("~")Parcel/CheckOwnerId";
                        urlString = sanitize_url_path(urlString);
                        $.post(urlString, data,
                           function (result) {
                               if (result) {
                              displayErrorMessage("Owner Id already exists");
                                    $("#pin-edit").show();
                                    $('#owner_id_txt').attr("disabled", true);
                                   $("#save-pin").hide();
                                }
                            });
                    })
        });

【问题讨论】：

请将所有相关的 html 对象添加到您的代码中。

标签： javascript jquery asp.net-mvc jquery-ui

【解决方案1】：

你的 '$('#owner_id_txt').change(function () {' 在 ' $('#save-pin').click(function () {' 中被调用，所以一旦你输入文本框。把函数放在外面，然后它会检查值。参考下面的jsfiddle示例

代码：JS

$(document).ready(function() {
   $('#pin-edit').click(function () {
      $('#owner_id_txt').removeAttr("disabled");
      $("#pin-edit").hide();
      $("#save-pin").show();
      oldOwnerId = $('#owner_id_txt').val();
   });
   $('#save-pin').click(function () {
      if ($("#owner_id_txt").val() == "") {
      $("#owner_id_txt").focus();
      $('#owner_id_txt').val(oldOwnerId);
      return;
      }
      $("#pin-edit").show();
      $('#owner_id_txt').attr("disabled", true)
      $("#save-pin").hide();
   });
   $('#owner_id_txt').change(function () {//alert("Check Exist or Not");
      console.log($(this).val());
   });
   $('#owner_id_txt').attr("disabled", true);
});

代码：HTML

<input type="text" id="owner_id_txt" >
<div id="pin-edit">edit</div>
<div id="save-pin">save</div>

https://jsfiddle.net/pitchiahn/fr6gdeyd/

【讨论】：

【解决方案2】：

这可以使用 jquery change 归档：

$( "'textboxid" ).change(function() {
  // Check input( $( this ).val() ) for validity here using ajax call 
});

【讨论】：