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

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

 
 
Select Other Materials
 
 
Select a Material:  @Html.DialogFormButton("Add New Material", Url.Action("AddMaterial", "Popup"), "Add New Material", null, Url.Action("Create")) 
 
 @Html.Partial("_OtherMaterials", Model.SupplierMaterialList.Where(x => x.PrimaryMaterialFlag == false).ToList()) 
  

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

 @model IList 
 
These materials have now been added for this supplier
  @Html.DisplayForModel()   

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

 @model SupplierMaterial  @Model.Material.MaterialName   
  @Html.HiddenFor(model => model.MaterialId) 
   

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

 $('.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(); }); });