javascript - 单击按钮后自动搜索(ajax 调用)不起作用

Question

我正在努力解决这个问题，但仍然没有得到解决方案，尝试了很多链接和代码，但在解决这个问题时遇到了一些问题。

问题:

我有一个输入类型“文本”来搜索员工姓名。当我开始输入“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");
    }
});

用户界面控制:

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

请告诉我，我应该采取什么措施来修复它。

Answer 1

这可能是问题的原因

$("#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");
    }
});

<小时/>

what do you mean by bind it again

这是将 EmployeeSearchBox 与 DOM 绑定(bind)的函数 $("#EmployeeSearchBox").bind('input propertychange', function () {.... 当您移动时到 PDF 选项卡并再次返回到 SearchBox 选项卡，该元素的绑定(bind)丢失，这意味着 DOM 不知道在 EmployeeSearchBox 上触发属性更改时要做什么。解决该问题的两种方法

1) 确保事件处理程序始终存在于 DOM 中，即使您在选项卡之间导航时也是如此。

2) 如果选项 1 在您的场景中无法实现，请在每次访问搜索选项卡时重新绑定(bind)事件处理程序。当您位于搜索选项卡时，显式调用此 $("#EmployeeSearchBox").bind。