MVC:按钮不触发表格单元格中的单击事件 [英] MVC: Button not firing click event in a tablecell

问题描述

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

EDIT - I am putting in more info to help get the answer. What I am doing is using autocomplete to add items to a list;

   <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看起来像

So everytime an item is entered, the list grows. I am wondering if the problem is that the script does not pick up the latest updates to the page? The partial view _OtherMaterials looks like

@model IList<SupplierMaterial>

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

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

This is a grid that uses the DisplayTemplate below to display rows of data;

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

该表格不与其他表格重叠. 当用户单击按钮时，该代码将运行；

The form does not overlap with any other. When the user clicks on the button this code is meant to run;

$('.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事件，因此我无法弄清原因

However the click event is not captured by this code, and I can't work out why

推荐答案

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

when you are working with dynamic content that has been added to the page on the fly, event handlers like click() will not get bound to dynamically added selectors by itself.

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

you should put your code in delegate() or on() indside document load that can handle future contents.

$('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开始不推荐使用.希望这会有所帮助.

you can use much more closer selector than body to make the response more faster. you could also use live('selector', function(){}); but it has been deprecated as of jQuery v1.9. Hope this helps.

这篇关于MVC:按钮不触发表格单元格中的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！