with javascript:void(0) href not calling ajax query after one use

Question

I have dropdown on page with this menu item:

<li><a onclick="return false" href="javascript:void(0)" class="change-state" data-id="@Model.Id" data-state="@ReportStatus.New">Mark as New</a></li>

And I have jquery event handler for click on this <a>

$(function () {
     $('.change-state').click(function () {
         var attr = this.dataset;
         $.ajax({
             method: 'POST',
             url: '@Url.Action("ChangeReportStatus", "Default")',
             data: { id: attr.id, status: attr.state },
             success: function (data) {
                 var name = '#report-number-' + attr.id;
                 $(name).html(data);
             }
         });
     });
});

And when I open my page, click this <a> I have changes by ajax, but if I try to click it again, nothing works. I think it's because I using javascript:void(0), but without this my ajax refresh all page, not only element. Please help me to solve this issue.

By chance, is that `` contained inside `'#report-number-' + attr.id`? — Stryner, Nov 04 '15 at 15:39
Perhaps you should include a failure function to see if the AJAX call is complaining about anything. — Harris, Nov 04 '15 at 15:40
@AlexeyMalyuk That is the problem. You are dynamically creating your anchor tag again. See my answer below for the solution. — Gjohn, Nov 04 '15 at 15:52

score 0 · Accepted Answer · answered Nov 04 '15 at 15:49

0

From your code I am assuming that you are getting the name of a container and then replacing the html in it which includes you anchor tag? If so then a click event won't do it because the anchor tag will be dynamically created again and it won't be registered to use your click event. You need to try this as your event handler instead

$('.change-state').on('click', function() {
   ....
});

answered Nov 04 '15 at 15:49

Gjohn

1,271
1
8
12

I tried this but it don't works too. Yeah, my `` includes in element that replacing by ajax. – Alexey Malyuk Nov 04 '15 at 15:51
Does the class .change-state exist after you have refreshed? – Gjohn Nov 04 '15 at 15:53
Also what version of jquery are you using? Maybe you can try .live() instead of .on(). I believe .live() is deprecated in the newer versions but if you are using an older version of jquery it might be why .on() is not working – Gjohn Nov 04 '15 at 15:55
Yes, after refresh class exist – Alexey Malyuk Nov 04 '15 at 15:55
I use `1.10.2` version of jquery, yeah, I try `.live()` and get error `$(...).live is not a function` – Alexey Malyuk Nov 04 '15 at 15:57
Yea, that one was removed in version 1.9, deprecated in 1.7 – Gjohn Nov 04 '15 at 15:58
1

Your answer is equivalent to what the OP did. You're not actually using [event delegation](https://learn.jquery.com/events/event-delegation/) – Stryner Nov 04 '15 at 15:58

with javascript:void(0) href not calling ajax query after one use

1 Answers1