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' autoplete='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.

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' autoplete='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.

• javascript
• jquery
• html

• 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 Commented Jan 7, 2014 at 23:25
• 1 If you have jQuery version >= 1.7, consider using .on('click' instead of .click - stackoverflow./a/11878976/1311025 – Tomás Commented Jan 7, 2014 at 23:27
• Works fine for me in Chrome: jsfiddle/89QZ2. In which browser are you experiencing the problem? – Felix Kling Commented Jan 7, 2014 at 23:35
• 1 possible duplicate of Events triggered by dynamically generated element are not captured by event handler – Felix Kling Commented Jan 7, 2014 at 23:57
• 1 and Event binding on dynamically created elements? – Felix Kling Commented Jan 7, 2014 at 23:57

2 Answers 2

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.

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