0

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

   <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;
});

但是，此代码未捕获单击事件，我不知道为什么

4

2 回答 2

1

当您使用动态添加到页面的动态内容时，事件处理程序click()本身不会绑定到动态添加的选择器。

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

$('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。希望这可以帮助。

于 2013-05-21T13:33:41.220 回答
0

尝试更换

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();
    });
});
于 2013-05-21T12:59:36.760 回答