dynamic click not working jquery MVC4

Question

I have a list with paging integration.

This is how list is coming-

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

Now I wanted to Delete row from this list.

For the first page it works fine and retrieves me back with alert with an id of current row.

But as soon as I click on second page from paging below It deleting row doesn't trigger the row's 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>

Above jQuery only works for first page that is existed in document now.

How Do I create click function for dynamically coming list after document changes to next page.

On first page-

On second page-

Answer 1

That's happening because the code where you're tying the event to the table rows only is running when the outer page loads, and not when the partial views get refreshed via ajax.

The easiest and best way to resolve this is with jQuery's on.

You'll need to have a static element on the page that you can use as your first selector, and then just wire it up inside of your jQuery. For the purposes of this example, I'll wrap your table in a <div id="tableWrapper"></div>, but you can use any other element that the table will be inside that is part of the main view. I would also add a class called "delItem" to your delete anchor tags.

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

EDIT WITH ADDITIONAL DESCRIPTIONS OF WHAT IS GOING ON

So what is happening is that your main view loads once. Presumably, your partial view is loaded the first time as part of the initial response to the client.

When that page is processed by the browser, it gets to your javascript where you have your $(document).ready(). It begins to process the javascript, and goes, "Ah! I do have all of these 'a[id^="del-@item.Id"]' elements, so I'll wire up this event to them.

But when you go to the next page, just the Partial View gets reloaded via AJAX, so the browser doesn't need to fire the $(document).ready() again, as the "document" didn't change.

That's where the jquery on() comes into play. With this syntax, you're telling jQuery to "anytime an element matching the selector I provide (in this case .delItem) is added to the DOM, give it this function on the event I tell it to." So jQuery is dynamically scanning the DOM every time there is an update to the content to search for any new elements that match the selector. That's why it now works when you reload part of the content via AJAX.

Answer 2

try this:

if (data.success == true) {

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

 }