テキストボックスの編集時にjQuery関数を呼び出す方法

Question

私のコードでは、無効になっているテキストボックスが1つあります。ユーザーが編集鉛筆アイコンをクリックすると、編集用のテキストボックスが有効になります。テキストボックスを編集するときには、編集済みの値がすでに終了しているかどうかをチェックする必要があります。それのために私はコール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(); 
           } 
          }); 
        }) 
     }); 

Answer 1

あなたの '$（' ＃のowner_id_txt '）の変化（機能（）{' と呼ばれていますあなたがテキストボックスを入力した後に呼び出されないようにするには、関数を外に置き、値をチェックしてください。以下の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/

Answer 2

これはjqueryの変更を使用してアーカイブすることができます：

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