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="[email protected]">
     <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="[email protected]"><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^="[email protected]"]', function () {
              var $this = $('a[id^="[email protected]"]');
              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) {
                           $('#' + '[email protected]').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-

enter image description here

On second page-

enter image description here

Do you have to include "@item.Id" in your row selector? Cant you have "a.someSelector" instead? My bet is that the second page is not present upon document ready. Some other side notes: Use "$(this)" instead of "var $this = $('a[id^="[email protected]"]');" Also, "$this.parent().parent().parent().parent().parent().attr('id');" is bad practice due to its fragility to DOM hiearachy changes, better use ".closest('selector')". — Andreas
– Andreas, Commented Apr 23, 2014 at 12:53
try this: $(document).on('click', 'a#del-@(item.Id)',function() {}) — Ehsan Sajjad
– Ehsan Sajjad, Commented Apr 23, 2014 at 12:55

krillgar · Accepted Answer · 2014-04-23 13:43:59Z

2

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^="[email protected]"]' 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.

edited Apr 23, 2014 at 13:43

answered Apr 23, 2014 at 12:56

krillgar

12.9k6 gold badges56 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andreas Over a year ago

Use "on" instead. From jQuery docs: As of jQuery 1.7, .delegate() has been superseded by the .on() method.

krillgar Over a year ago

Thank you. I had just been shown this last week by a coworker who'd been using delegate for years and hadn't known about the change to on. I'll edit now.

user3163213 Over a year ago

@krillgar, Yes the page is a partial view. I couldn't understand how to do this with your explanation, Though I tried. Can you explain more ?

krillgar Over a year ago

Did my edit to the question make things any clearer?

Naveen Chandra Tiwari · Accepted Answer · 2014-04-23 13:16:53Z

0

try this:

if (data.success == true) {

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

 }

answered Apr 23, 2014 at 13:16

Naveen Chandra Tiwari

5,1333 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

dynamic click not working jquery MVC4

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related