Click event by name not working in jQuery

Question

I am stuck with very small issue.

<a href="#" class="btn btn-small btn-danger" name="ignore" id="45"><i class= "fa fa-close"> </i> Ignore </a>

<a title="ignore1" data-original-title="ignore1" id="14" name="ignore1" class="btn btn-small btn-danger" href="#"><i class="fa fa-close"> </i> Ignore1 </a>

You can see two hyperlinks and here is the jQuery code.

$("a[name='ignore1']").click(function() {
    alert('Test Ok');
});

$("a[name='ignore']").click(function() {

    alert('Ok');
});

I am not getting alert. Do you have any advice on this?

Put you `js` in `$(document).ready(function(){ /*your code*/ })`. — Ibrahim Khan, Jun 04 '16 at 07:29

score 2 · Accepted Answer · answered Jun 04 '16 at 07:40

2

You need to make sure that the DOM is loaded.

$(function(){
    $("a[name='ignore']").click(function(){
        alert('yesss');
    });     
});

If you are dynamicaly loading the elements you may want to use on() which will dynamicaly attach the event:

$(document).on("click","a[name='ignore']", function() {
    alert('yesss');
});

answered Jun 04 '16 at 07:40

Shlomi Hassid

6,500
3
27
48

thanks for your answer. voted up. – Roxx Jun 04 '16 at 07:50
$(document).on("click","a[name='ignore']", function() { this solved the issue. – Roxx Jun 04 '16 at 07:53

score 1 · Answer 2 · answered Jun 04 '16 at 07:33

With document.ready it is working. Check this out:

$(document).ready(function() {
  $("a[name='ignore1']").click(function() {
    alert('Test Ok');
  });

  $("a[name='ignore']").click(function() {

    alert('Ok');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a href="#" class="btn btn-small btn-danger" name="ignore" id="45"><i class= "fa fa-close"> </i> Ignore </a>

<a title="ignore1" data-original-title="ignore1" id="14" name="ignore1" class="btn btn-small btn-danger" href="#"><i class="fa fa-close"> </i> Ignore1 </a>

thanks for your answer. voted up. – Roxx Jun 04 '16 at 07:49 — Roxx, Jun 04 '16 at 07:49

score 1 · Answer 3 · edited Jun 04 '16 at 07:43

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


$(document).ready(function(e) {

    $("a[name='ignore1']").click(function() {

        alert('Test Ok');
    });

    $("a[name='ignore']").click(function() {

        alert('Ok');
    });

});

<a href="#" class="btn btn-small btn-danger" name="ignore" id="45"><i class= "fa fa-close"> </i> Ignore </a>

<a title="ignore1" data-original-title="ignore1" id="14" name="ignore1" class="btn btn-small btn-danger" href="#"><i class="fa fa-close"> </i> Ignore1 </a>

edited Jun 04 '16 at 07:43

guradio

15,524
4
36
57

answered Jun 04 '16 at 07:38

Reji kumar

298
3
11

thanks for your answer. voted up. – Roxx Jun 04 '16 at 07:49

Click event by name not working in jQuery

3 Answers3