ボタンをクリックしても自動検索（Ajax呼び出し）が機能しない

Question

私はこの問題を解決しようと努力していますが、解決策を得られず、多くのリンクとコードを試しましたが、これを修正するために少し問題があります。

ISSUE：

私は従業員の名前を検索するための入力タイプ「テキスト」を持っています。 「WY」のような文字を入力すると、WYで始まるすべての名前が表示されます。

私は私が必要とする従業員を取得したら、私は他の制御と（別のタブにロードします）を実行したPDFレポートにそれを移動することができます。 問題は私が再び従業員の検索を開始すべきページに戻ったときに検索されないことです。下図のように：ここでは

は私のAjaxコードです：

$("#EmployeeSearchBox").bind('input propertychange', function() { 
    if ($('#EmployeeSearchBox').val() != '') { 
     $('#EmployeeList').empty(); 

     $.ajax({ 
      type: "GET", 
      url: "SomeSelectionPage.aspx/GetEmployees", 
      data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" }, 
      dataType: 'json', 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       //alert('success'); 
       if (data.d.length > 0) { 
        $("#EmployeeList").removeClass("hideControl").addClass("showControl"); 
       } 
       else { 
        $("#EmployeeList").removeClass("showControl").addClass("hideControl"); 
        // $('select').multipleSelect(); 
        alert("No data"); 
       } 
       $.each(data.d, function (index, value) { 
        $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId)); 

       }); 
      },     
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText); 
      } 
     }); 
    } 
    else { 
     $('#EmployeeList').empty(); 
     $("#EmployeeList").addClass("hideControl"); 
    } 
}); 

UIコントロール：

<input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" /> 

私はそれを固定し得るためにやるべきこと何、私に知らせてください。

Answer 1

アムのために、この関数を使用します。

は、私が代わりに.Bind（）を使用しての、このの修正を見つけ、私はそれを固定している答えを掲載しています、 .on（）内部（文書）を使用しました。 ありがとうございます！

$(document).on("input propertychange", "#EmployeeSearchBox", function() { 

    if ($('#EmployeeSearchBox').val() != '')  { 
     $('#EmployeeList').empty(); 

     $.ajax({ 
      type: "GET", 
      url: "SomeSelectionPage.aspx/GetEmployees", 
      data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" }, 
      dataType: 'json', 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       //alert('success'); 
       if (data.d.length > 0) { 
        $("#EmployeeList").removeClass("hideControl").addClass("showControl"); 
       } 
       else { 
        $("#EmployeeList").removeClass("showControl").addClass("hideControl"); 
        // $('select').multipleSelect(); 
        alert("No data"); 
       } 
       $.each(data.d, function (index, value) { 
        $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId)); 

       }); 
      }, 
      //error: function (XMLHttpRequest, textStatus, errorThrown) { 
      // alert(textStatus); 
      //} 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText); 
      } 
     }); 
    } 
    else { 
     $('#EmployeeList').empty(); 
     $("#EmployeeList").addClass("hideControl"); 
    } 
}); 

注：行の下 はあまりにも動作します： .live（）メソッドあなたの "Ajaxコード" は定義されており、ロードされている

$("#EmployeeSearchBox").live('input propertychange', function() {... }); 

Answer 2

これは$("#EmployeeSearchBox").bind('input propertychange', function() { ..});はDOMで利用できない場合があります問題の

理由かもしれません。

EmployeeSearchBoxとpropertyChangeハンドラがまだ生存しているかどうかを確認するには、propertychange関数内にアラートを配置します。アラートが表示されている場合は、その問題はどこかにあります。

---

$("#EmployeeSearchBox").bind('input propertychange', function() { 
    if ($('#EmployeeSearchBox').val() != '') { 

     alert("Inside Property Change "); // Add this alert 
     $('#EmployeeList').empty(); 

     $.ajax({ 
      type: "GET", 
      url: "SomeSelectionPage.aspx/GetEmployees", 
      data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" }, 
      dataType: 'json', 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       //alert('success'); 
       if (data.d.length > 0) { 
        $("#EmployeeList").removeClass("hideControl").addClass("showControl"); 
       } 
       else { 
        $("#EmployeeList").removeClass("showControl").addClass("hideControl"); 
        // $('select').multipleSelect(); 
        alert("No data"); 
       } 
       $.each(data.d, function (index, value) { 
        $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId)); 

       }); 
      },     
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText); 
      } 
     }); 
    } 
    else { 
     $('#EmployeeList').empty(); 
     $("#EmployeeList").addClass("hideControl"); 
    } 
}); 

---

あなたはそれが再び

これはDOM $("#EmployeeSearchBox").bind('input propertychange', function() {....でEmployeeSearchBoxに結合され、あなたがPDFに移動しているときの機能であるバインドによって何を意味していますタブをクリックして再度SearchBoxタブに戻ると、この要素のバインディングが失われます。これは、プロパティの変更がEmployeeSearchBoxで発生したときに、DOMが何を行うかを知っていないことを意味します。それを解決する2つの方法

1）タブ間を移動する場合でも、イベントハンドラが常にDOMに存在することを確認してください。

2）シナリオでオプション1が達成できない場合は、検索タブにアクセスするたびにイベントハンドラをリバインドしてください。検索タブに入っているときに、これを明示的に呼び出すと$("#EmployeeSearchBox").bindとなります。

Answer 3

条件チェック領域や関数呼び出しメソッドに問題がなければ、2回目の検索でajax呼び出しが発生していることを確認してください。私はいつもこの問題を解決するために私を助けた「クレメントAmarnath」から提供された提案を、upvotingデータ検索

$("input").change(function(){ 
    ajax call..... 
})