Question

编辑 - 我正在提供更多信息以帮助我们找到答案。我正在做的是使用自动完成功能将项目添加到列表中;

   <section id="rightSide" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;">
        <fieldset>
            <legend>Select Other Materials</legend>
            <form method="get" action="@Url.Action("CreateOtherMaterials", "DataService")"
                  data-scd-ajax="true" data-scd-target="#otherMaterialList">
                <p>Select a Material: <input type="search" name="searchOtherMaterial" id="searchOtherMaterial" data-scd-autocomplete="@Url.Action("AutocompleteOtherMaterial", "DataService")" style = "width: 300px;" class="submitOtherMaterialSelectionNew" data-scd-add-other-material="@Url.Action("AddOtherMaterialNew", "DataService")"/>
                    @Html.DialogFormButton("Add New Material", Url.Action("AddMaterial", "Popup"), "Add New Material", null, Url.Action("Create"))
                </p>
            </form>  

            @Html.Partial("_OtherMaterials", Model.SupplierMaterialList.Where(x => x.PrimaryMaterialFlag == false).ToList())

        </fieldset>
    </section>

因此，每次输入项目时，列表都会增长。我想知道问题是脚本是否没有获取页面的最新更新？部分视图_OtherMaterials看起来像

@model IList<SupplierMaterial>

<div id="otherMaterialList" >
    <p>These materials have now been added for this supplier</p>
    <table>
        @Html.DisplayForModel()
    </table>
</div>

这是一个使用下面的DisplayTemplate显示数据行的网格;

@model SupplierMaterial
<tr>
    <td>@Model.Material.MaterialName </td>
    <td>
        <form class="shrinkwrap" method="get" action="@Url.Action("RemoveOtherMaterial", "DataService")">
            <input type="button" value="Remove" class="removeItem"/>
            @Html.HiddenFor(model => model.MaterialId)
        </form>
    </td>
</tr>

表格不与任何其他表格重叠。当用户点击按钮时，该代码将运行;

$('.removeItem').click(function () {
    alert("test");
    var $form = $(this).closest("form");
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $tr = $(this).closest("tr");
        $tr.remove();
    });

    return false;
});

但是此代码未捕获click事件，我无法理解为什么

Answer 1

当您处理已动态添加到页面中的动态内容时，click()等事件处理程序将不会自动绑定到动态添加的选择器。

您应该将代码放在可以处理未来内容的delegate()或on() indside文档加载中。

$('body').delegate('.removeItem', 'click', function(){
var $form = $(".shrinkwrap");
var options = {
    url: $form.attr("action"),
    type: $form.attr("method"),
    data: $form.serialize()
};

$.ajax(options).done(function (data) {
    var $tr = $(this).parent("tr");
    $tr.remove();
 });
});

您可以使用比body更接近的选择器，以使响应更快。您也可以使用live('selector', function(){});，但已从jQuery v1.9开始弃用。希望这会有所帮助。

Answer 2

尝试替换

alert(test);

与

alert('test');

我想在这里你已经坚持并尝试这样

$('.removeItem').click(function () {
    var $form = $(".shrinkwrap");
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $tr = $(this).parent("tr");
        $tr.remove();
    });
});

MVC：按钮不在表格单元中触发单击事件

2 个答案: