Can't catch an with .click in jQuery

Question

Why is it that I can't catch this <a>...

<a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">
   <span class="select2-chosen">select item</span>
   <abbr class="select2-search-choice-close"></abbr>
   <span class="select2-arrow">
      <b></b>
   </span>
</a>

... with this jQuery?

$(document).ready(function() {
     $( ".select2-choice" ).click(function() {
     alert( "Handler for .keydown() called." );
     });
});

I think this is the function that's generating the dropdown:

        createContainer: function () {
        var container = $(document.createElement("div")).attr({
            "class": "select2-container"
        }).html([
            "<a href='javascript:void(0)' onclick='return false;' class='select2-choice' tabindex='-1'>",
            "   <span class='select2-chosen'>&nbsp;</span><abbr class='select2-search-choice-close'></abbr>",
            "   <span class='select2-arrow'><b></b></span>",
            "</a>",
            "<input class='select2-focusser select2-offscreen' type='text'/>",
            "<div class='select2-drop select2-display-none'>",
            "   <div class='select2-search'>",
            "       <input type='text' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' class='select2-input'/>",
            "   </div>",
            "   <ul class='select2-results'>",
            "   </ul>",
            "</div>"].join(""));
        return container;
    }

Actually, I'm trying to solve this issue adding button on a select2 by adding the button when the user click the field, since my previous solutions aren't working.

I'm using Firefox 26.0 and Chrome Version 31.0.1650.63 m on a windows 8 machine, 64bit.

Does <a href="javascript:void(0)" ... > have something to do with it? Thank you for the help.

inline javascript is a bad decision atm. javascript void should stop it from doing the default action(like return false or e.preventDefault()). but as you can see it does not work properly anymore(in chrome it does nothing if another eventhandler is added to the element). — cocco, Jan 07 '14 at 23:25
If you have jQuery version >= 1.7, consider using `.on('click'` instead of `.click` - http://stackoverflow.com/a/11878976/1311025 — Tomás, Jan 07 '14 at 23:27
Works fine for me in Chrome: http://jsfiddle.net/89QZ2/. In which browser are you experiencing the problem? — Felix Kling, Jan 07 '14 at 23:35
possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Jan 07 '14 at 23:57
and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Jan 07 '14 at 23:57

scrblnrd3 · Answer 1 · 2014-01-08T00:15:38.043

3

When you put javascript:void(0) in an href, in certain browsers, it will override whatever code you have associated with the $(".select2-choice").click().

To fix this, you could change it to <a href="#" class="select2-choice select2-default" tabindex="-1">

This JSFiddle actually works with both with the latest version of Chrome on Mac OSX, but I think it will break for some versions of IE

For your edit, I think that the problem is that when you make the event handler, there are no matching methods. You will want to use .on("click",".select2-choice") instead of .click()

Try this

$(document).on("ready",".select2-choice",function() {
     $( ".select2-choice" ).click(function() {
     alert( "Handler for .keydown() called." );
     });
});

edited Jan 08 '14 at 00:15

answered Jan 07 '14 at 23:20

scrblnrd3

7,228
9
33
64

Thank you @scrblnrd3 for your informative answer. :) but still I can make my alert box display whenever I click the anchor, actually the link was only generated by a javascript also on the run, does this affect its behavior? I know your code is correct but, my code doesnt seem to work :/ – melvnberd Jan 07 '14 at 23:34
@melvnberd Did you remove the "javascript:void(0)" code from the href attribute? – Wilson Freitas Jan 07 '14 at 23:37
@WilsonFreitas Yes I removed "javascript:void(0)" and replaced it with # as scrblnrd3 – melvnberd Jan 07 '14 at 23:43
Could you post the code that generated that, as well as what browser you are using? – scrblnrd3 Jan 07 '14 at 23:44
@scrblnrd3 yeah sure, ill just update my question above. – melvnberd Jan 07 '14 at 23:45
@scrblnrd3 yeah thank you for that :), I guess im just pointing out the wrong block here, but definitely your answers added new information on my brain. have a good day! – melvnberd Jan 08 '14 at 00:20

score 3 · Accepted Answer · answered Jan 08 '14 at 00:00

3

because $( ".select2-choice" ) did not match anything at the time of execution, so no event was bound. try

$(document).ready(function() {
   $(document).on("click", ".select2-choice", function() { ... });
});

which adds a click event to the document that is filtered to the selector before executing the function.

answered Jan 08 '14 at 00:00

Hafthor

16,358
9
56
65

hi @Hafthor thanks for the answer but its still not working, I tried binding it to another element e.g on text box with a class="qty" and it worked, maybe Im not really clicking the element with the class="select2-choice" but its the only on that block T_T – melvnberd Jan 08 '14 at 00:15

Can't catch an with .click in jQuery

2 Answers2