Question

为什么我无法抓住这个<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>

...用这个jQuery？

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

我认为这是产生下拉列表的功能：

        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;
    }

实际上，我正在尝试通过在用户点击字段时添加按钮来解决此问题adding button on a select2 ，因为我之前的解决方案无效。

我在Windows 8机器上使用Firefox 26.0和Chrome版本31.0.1650.63 m，64位。

<a href="javascript:void(0)" ... >是否与它有关？谢谢你的帮助。

Answer 1

当您将javascript:void(0)放入href时，在某些浏览器中，它会覆盖您与$(".select2-choice").click()相关联的所有代码。

要解决此问题，您可以将其更改为<a href="#" class="select2-choice select2-default" tabindex="-1">

This JSFiddle实际上适用于Mac OSX上最新版本的Chrome，但我认为它会破坏某些版本的IE

对于您的编辑，我认为问题在于，当您创建事件处理程序时，没有匹配的方法。您需要使用.on("click",".select2-choice")代替.click()

试试这个

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

Answer 2

因为$（“。select2-choice”）在执行时没有匹配任何内容，所以没有绑定任何事件。试试

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

在执行函数之前，将click事件添加到过滤到选择器的文档中。

无法抓住<a> with .click in jQuery</a>

2 个答案: