第二轮未触发 click() 事件答案

【问题标题】：click() event not triggered for second round第二轮未触发 click() 事件
【发布时间】：2015-09-03 19:13:48
【问题描述】：

我想将锚选项卡上的点击功能与选择类绑定。我用下面的代码做到了。当我第一次单击时它工作正常，但之后当我再次单击锚点时，附加事件没有启动。我不知道出了什么问题。这是我将点击事件附加到锚选项卡的 jquery 代码。

$('a.select').click(function () {
    var data = subtitle_json;
    data = data[$(this).attr('aria-controls')][0];
    $('p#subtitle-saved-ad > span:nth-child(1)').html(data.ad_count + " " + data.ad_text);
});

这是我的 html Dom。

<ul class="nav nav-tabs" id="tabs-collapsed" role="tablist">
    <li role="presentation" class=""> <a href="#71" aria-controls="71" role="tab" data-toggle="tab" class="select">
                Cars            </a>

    </li>
    <li role="presentation"> <a href="#260" aria-controls="260" role="tab" data-toggle="tab" class="select">
                Bicycles            </a>

    </li>
    <li id="lastTab" class="" style="display: block;"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
              More <span class="caret"></span>
            </a>

        <ul class="dropdown-menu" id="collapsed">
            <li role="presentation"> <a href="#72" aria-controls="72" role="tab" data-toggle="tab" class="select">
                Bikes &amp; Scooters            </a>

            </li>
        </ul>
    </li>
</ul>

【问题讨论】：

请先缩进您的代码，因为它是问题的主要来源之一。我敢打赌这个 HTML 代码不会通过W3C HTML Validator。
您好，我正在将更多下拉列表中的锚标签 dom 与第一个锚标签交换，即每当单击更多下拉锚标签时，汽车。是否对点击事件绑定进行了任何更改。

标签： javascript jquery html

【解决方案1】：

如果您动态添加相同的锚点，则单击功能会随之消失。相反，将其链接到正文并侦听该类型的元素：替换这个：

$('a.select').click(function() {

为此：

$('body').on("click", "a.select", function() {

【讨论】：

其实差不多。来自 jQuery .click() 文档，“此方法是 .on( "click", handler ) 的快捷方式”
@RMontes13 不，不一样。这个.on() 有 3 个参数。第二个是选择器，这使得它适用于动态创建的 html 元素。您还将它绑定到父元素，在本例中为 body
您好，我正在将更多下拉列表中的锚标签 dom 与第一个锚标签交换，即每当单击更多下拉锚标签时，汽车。是否对点击事件绑定进行了任何更改

【解决方案2】：

js部分缺少代码

 $('a.select').click(function() {
  alert('click');
 });

这将在您每次单击元素时引发警报。提供更多代码或尝试从这一点开始开发。

【讨论】：

【解决方案3】：

我可以说的是，即使您的 onclick 也没有任何问题。如果您稍微解释一下功能会更好。只需在事件中添加控制台或警报即可检查代码是否正常工作。

【讨论】：

【解决方案4】：

检查这个 jsFiddle。

http://jsfiddle.net/f0avxhsk/

我刚刚添加了alert() 来检查是否触发

正在触发

【讨论】：