Can't catch an <a> 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.

Answer 1

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.

Answer 2

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." );
     });
});