javascript - 为什么动态添加的 View 输入字段无法在主视图上附加 jQuery 事件

Question

在单击按钮时将部分 View 动态添加到主视图中，如下所示，动态加载的 View 输入无法将 jQuery 附加到主视图上，但此附件在部分 View 上完美工作。

主视图

 <input type="button" name="BtnAddNew" value="Add New" onclick="AddCustomer();" />

    <script>
        function AddCustomer() {
            $.get("DataEntryScreen").done(function (r) {
                $('#DivDatEntry').html(r);
            });
        }

        $('#btnCancel').click(function (e) {//not work on main view
            alert();
            $('#DivDatEntry').html("");
        });

    </script>

部分 View =DataEntryScreen.cshtml

@{
    AjaxOptions o = new AjaxOptions();
    o.OnSuccess = "OnSaveSuccess";
}
@using (Ajax.BeginForm("SaveCustomer", "SPA", o))
{
    <table>
        <tr>
            <td>Customer Name:</td>
            <td><input type="text" name="CustomerName" value="" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="Address" value="" /></td>
        </tr>
        <tr>
            <td>Age:</td>
            <td><input type="text" name="Age" value="" /></td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input type="submit" name="name" value="Save" />
                <input type="button" name="name" value="Reset" />
                <input id="btnCancel" type="button" name="name" value="Cancel" />
            </td>
        </tr>
    </table>
}

现在动态加载部分 View =“DataEntryScreen.cshtml”按钮=“btnCancel”在主视图上附加 jQuery 事件是行不通的，然后在对应的部分 View 上编写相同的 jQuery 语法就可以完美工作。

<script>


    $('#btnCancel').click(function (e) {//perfectly work on partial view.
        alert();
        $('#DivDatEntry').html("");
    });

</script>

为什么 jQuery 事件附件在主视图上不起作用？

Answer 1

它不起作用，因为您试图将事件监听器附加到调用 jQuery 函数时 DOM 中尚不存在的元素。

分步说明:

在主视图中，当评估 script 标记时，将调用 $('#btnCancel') 函数，该函数在页面上找不到 #btnCancel 元素 - 因为它尚不存在。仅当您在调用 AddCustomer() 时异步获取该元素后，此元素才会添加到页面。

因此，$ 函数返回空列表[]。

由于 jQuery 没有找到任何内容，因此之后调用的 .click() 函数将在空列表上进行操作，并且不会附加您的事件监听器。

为什么将代码移动到部分时会起作用:

当您将 $('#btnCancel') 函数调用移至分部 View 时，函数调用的顺序会发生变化。首先，需要异步获取部分，然后将响应添加到 DOM，然后评估 script 标签，最后调用 $('#btnCancel') 函数，依次执行在 DOM 中查找元素 #btnCancel 并将结果传递给 .click() 函数，该函数会附加您的事件监听器。

可能的解决方案:

可以推迟创建新的事件监听器，直到异步获取的元素添加到 DOM 中。

为此，您可以修改 AddCustomer 函数。

在主视图中:

function AddCustomer() {
  $.get("DataEntryScreen").done(function (r) {
    $('#DivDatEntry').html(r).find('#btnCancel').click(function (e) {
      alert();
      $('#DivDatEntry').html("");
    });
  });
}