Question

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

主视图

 <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>

部分视图= 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>
}

现在动态加载局部视图=“ DataEntryScreen.cshtml ” button =“ btnCancel ” 在主视图上附加jQuery事件不起作用，然后在相应的局部视图上编写相同的jQuery语法就可以了。

<script>


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

</script>

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

Answer 1

它不起作用，因为您正在尝试将事件侦听器附加到元素，而jQuery函数被调用时，DOM中尚不存在该元素。

分步说明：

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

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

由于jQuery找不到任何内容，因此之后调用的.click()函数在空列表上运行，并且未附加事件侦听器。

将代码移至部分代码时为何起作用：

将$('#btnCancel')函数调用移至部分视图时，函数调用的顺序会更改。首先，部分需要异步获取，然后将响应添加到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("");
    });
  });
}

Answer 2

通常我通过在主视图中使用事件委托来解决此问题：

RabbitTemplate

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

2 个答案: