Question

我有一个包含分页集成的列表。

这就是列表的来源 -

foreach(var item in Model)
{

 <tr id="rowitems-@item.Id">
     <td>
        @Html.DisplayFor(modelItem => item.vendorName)
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.vendor_Representative)
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.fixed_Line)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.mobile_No)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.fax_No)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.emaiL)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.addresS)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.rep_Contact)
      </td>
      <td>
        <span class="dropdown settings">
         <a href="javascript:;" class="btn btn-default btn-mini dropdown-toggle options" 
           data-toggle="dropdown"><i class="fa fa-cogs"></i></a>
         <ul class="dropdown-menu arrow pull-right">
            <li>
              <a href="javascript:;"><i class="fa fa-pencil"></i>&nbsp;Edit</a>
            </li>
            <li>
              <a href="javascript:;" id="del-@item.Id"><i class="fa fa-lock"></i>
               &nbsp;Delete
              </a>
            </li>
          </ul>

         </span>
        </td>
       </tr>
  }

现在我想删除此列表中的行。

对于第一页，它工作正常，并使用当前行ID的警报检索我。

但是，当我点击下面的分页第二页时，删除行并不会触发该行的ID。

jQuery -

<script type="text/javascript">
    $(function () {
        $(document).on('click', 'a[id^="del-@item.Id"]', function () {
              var $this = $('a[id^="del-@item.Id"]');
              var id = $this.parent().parent().parent().parent().parent().attr('id');
              alert(id);
                $.ajax({
                    url: '/Vendors/DeactivateVendor/@item.Id',
                    type: 'POST',
                    success: function (data) {
                        if (data.success == true) {
                           $('#' + 'rowitems-@item.Id').remove();
                             }
                         else {
                           window.location.href = "/UserAccount/Login/";
                           }
                         }

                });
             });
           });


     </script>

以上jQuery仅适用于现在存在于文档中的第一页。

如何在文档更改为下一页后为动态列表创建点击功能。

在第一页 -

enter image description here

在第二页 -

enter image description here

Answer 1

发生了这种情况，因为只有当外部页面加载时才会运行将事件绑定到表行的代码，而不是通过ajax刷新部分视图时。

解决此问题的最简单，最好的方法是使用jQuery＆＃39; on。

您需要在页面上有一个静态元素，您可以将其用作第一个选择器，然后将其连接到jQuery中。出于本示例的目的，我将您的表包装在<div id="tableWrapper"></div>中，但您可以使用该表将位于主视图中的任何其他元素。我还要添加一个名为＆＃34; delItem＆＃34;删除锚标签。

$(document).ready(function () {
    // Other stuff you need done.
    $('#tableWrapper').on("click",".delItem",  function () {
        deleteItem(this);
    });
});

var deleteItem(elem) {
    var $this = $(elem);
    // Continue on with your code to delete the item.
};

编辑附加说明

所以发生的事情是你的主视图加载一次。据推测，您的部分视图是第一次加载，作为对客户端的初始响应的一部分。

当浏览器处理该页面时，它会转到您拥有$(document).ready()的javascript。它开始处理javascript，然后去，＆＃34;啊！我确实拥有所有这些'a[id^="del-@item.Id"]'元素，因此我会将此事件连接到它们。

但是当你转到下一页时，只有部分视图通过AJAX重新加载，因此浏览器不需要再次激活$(document).ready()，因为＆＃34;文档＆＃34;没有改变。

jquery on()发挥作用的地方。使用这种语法，你可以告诉jQuery＆＃34;任何时候匹配我提供的选择器的元素（在这种情况下是.delItem）被添加到DOM中，在我告诉它的事件上给它这个函数到＆＃34。因此，每次对内容进行更新时，jQuery都会动态扫描DOM，以搜索与选择器匹配的任何新元素。这就是为什么当你通过AJAX重新加载部分内容时它现在有效。

Answer 2

试试这个：

if (data.success == true) {

 $('#' + id).remove();

 }

动态点击不工作jquery MVC4

2 个答案: