Click event not firing on link generated with Html.ActionLink

Question

I have an ActionLink as below:

@Html.ActionLink("-Pg", "SupprimerPage", "Section", 
new { pageId = @item.Id }, new { @id = "ConfirmDeletePage", @class = "editLink", style 
= "width:30px" })

And my script:

  $(document).ready(function () {
    $(document).on('click', '#ConfirmDeletePage', function () {
        var x=confirm("Confirm delete page?");
        console.log(x);
        if (x == true){
            return true;
        }
        else {
            return false;
        }
    });
});

When I use a hardcoded link with the <a> tag, it works fine. But when I try to generate the link using Html.ActionLink, the event handler is not called. any help?

Possible duplicate of [$("...").click(function () { }) not working](http://stackoverflow.com/questions/33755927/clickfunction-not-working) — Yatin Khullar, Nov 17 '15 at 11:56
View the generated HTML source in the browser and check that the ID is correctly injected. — iCollect.it Ltd, Nov 17 '15 at 11:58
Also note: delegated events, attached to `document`, do not require a DOM ready handler as `document` always exists (not the bug, just a note) :) — iCollect.it Ltd, Nov 17 '15 at 11:59
@tabby: Then your markup is invalid, so the behavior of the JavaScript is undefined. Correct your markup first. — David, Nov 17 '15 at 12:03
Ok, I used a class, however, when I click on Yes, the method in the ActionLink is not being called. Any help? — refresh, Nov 17 '15 at 12:03

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

For your problem "when I click on Yes, the method in the ActionLink is not being called" this is because you are returning yes on yes button so after execute your function it follow link "href" that's why it seems the method in the ActionLink is not being called, just return false or use event.preventDefault(); inside of true section which run on press yes button

     $(document).ready(function () {
        $(document).on('click', '.editLink', function (event) {
            var x=confirm("Confirm delete page?");
            console.log(x);
            if (x == true){
     
              return true;
    
            }
            else {
                alert('Pressed NO')
                return false;
            }
        });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="http://hello.com" class="editLink" >Click me !</a>

for more go with this anchor-tag-with-javascript-onclick-event

edited May 23 '17 at 11:44

Community

1
1

answered Nov 17 '15 at 12:11

Shailendra Sharma

6,976
2
28
48

I don't understand why I should return false in both cases. Doing so, keeps the dialog from popping up again and again. – refresh Nov 17 '15 at 12:15
return false in not for keeps the dialog from popping up again and again, this is for stop action link to follow it's url, and you can run some JavaScript on click of yes button, – Shailendra Sharma Nov 17 '15 at 12:19
Ok. But I want the method, that is, the action link to follow the url when I click on OK. If I click on Cancel or close the dialog, the method should not be called. – refresh Nov 17 '15 at 12:21
than simple return true will work, you just need to Use class Instead of id (because your id not unique) , i have updated my code please have a look – Shailendra Sharma Nov 17 '15 at 12:24
No this does not work either. The dialog is opened. I click on OK, the dialog is re loaded again and the method is not called. I click on Cancel, the dialog is re loaded and method again not called. – refresh Nov 17 '15 at 12:32
have you tried code snippet in my answer is this what you want exactly in your scenario ? – Shailendra Sharma Nov 17 '15 at 12:36

score 0 · Answer 2 · edited May 23 '17 at 12:15

If it works with a hardcoded link, but not when you use an ActionLink, that means the ActionLink must be generating something different to your hardcoded link, which means your jQuery selector (#ConfirmDeletePage) is not finding the element.

You can confirm this by using your browser's developer tools to inspect the <a... tag generated by the ActionLink.

Based on the question Html.ActionLink with a specified HTML id maybe you need to change @id = "ConfirmDeletePage" to id = "ConfirmDeletePage".

Click event not firing on link generated with Html.ActionLink

2 Answers2