jquery 类选择器问题 - 单击挂钩未按预期工作 [重复]答案

【问题标题】：jquery class selector issue - click hook not working as expected [duplicate]jquery 类选择器问题 - 单击挂钩未按预期工作 [重复]
【发布时间】：2015-10-29 18:05:39
【问题描述】：

我正在尝试使用 jquery 切换表中的隐藏行。此外，我想在单击图标时将字形图标的状态从加号更改为减号（反之亦然）。出于某种原因，我遇到了类选择器的问题。当我从加号图标转到减号图标时，它工作正常。但是，我不能从减号图标转到加号图标。 jquery click hook 仍在处理错误的函数。

这里是 jsfiddle http://jsfiddle.net/gs4te89g/

HTML：

<table id="table" class="table table-hover table-striped" style="margin-top: 0px;">
    <thead>
      <tr>
        <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
        <th style="" data-field="id" tabindex="0"><div class="th-inner ">Item ID</div>
          <div class="fht-cell"></div></th>
        <th style="" data-field="name" tabindex="0"><div class="th-inner ">Item Name</div>
          <div class="fht-cell"></div></th>
        <th style="" data-field="price" tabindex="0"><div class="th-inner ">Item Price</div>
          <div class="fht-cell"></div></th>
      </tr>
    </thead>
    <tbody>
      <tr data-index="0">
        <td><a class="detail-icon" href="javascript:"><i class="glyphicon glyphicon-plus icon-plus" id="1"></i></a></td>
        <td style="">0</td>
        <td style="">Item 0</td>
        <td style="">$0</td>
      </tr>
        <tr id="detail-view1" style="background-color:yellow;display: none;">
        <td colspan="4">My Hidden Row</td>
      </tr>
 </tbody>

和javascript：

 $('.glyphicon.glyphicon-plus').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('glyphicon-plus icon-plus');
    $(this).addClass('glyphicon-minus icon-minus');
    $('#detail-view'+this.id).toggle('slow');
});
$('.glyphicon.glyphicon-minus').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('glyphicon-minus icon-minus');
    $(this).addClass('glyphicon-plus icon-plus');
    $('#detail-view'+this.id).toggle('slow');
});

【问题讨论】：

将$('.glyphicon.glyphicon-minus').on('click', function (e) {}) 视为两部分：(1) 检索$('.glyphicon.glyphicon-minus') 元素，(2) 将点击事件绑定到它们。当页面加载并运行脚本时，有多少个$('.glyphicon.glyphicon-minus') 元素？
只需使用toggleClass。 jsfiddle.net/g161ppg6/1
其他答案（包括委托或类检查）正在解决一个您不需要解决的更复杂的问题。

标签： jquery

【解决方案1】：

是的，您需要改用事件委托...

试试这个...

    $('tr').on('click', '.glyphicon.glyphicon-plus',function (e) {
        e.preventDefault();
        $(this).removeClass('glyphicon-plus icon-plus');
        $(this).addClass('glyphicon-minus icon-minus');
        $('#detail-view'+this.id).toggle('slow');
    });
    $('tr').on('click', '.glyphicon.glyphicon-minus',function (e) {
        e.preventDefault();
        $(this).removeClass('glyphicon-minus icon-minus');
        $(this).addClass('glyphicon-plus icon-plus');
        $('#detail-view'+this.id).toggle('slow');
    });

这是因为您绑定到一个尚不存在的元素，因此它不起作用。通过将事件绑定委托给它的父级，在此我选择了tr 元素，您可以绑定到尚不存在的元素。

【讨论】：

谢谢，我明白了。
没问题 :) 编码愉快！

【解决方案2】：

您可以将代码包装到一个函数中，并改用hasClass：

$('.glyphicon').on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass('glyphicon-plus')){
        $(this).removeClass('glyphicon-plus icon-plus');
        $(this).addClass('glyphicon-minus icon-minus');
        $('#detail-view'+this.id).toggle('slow');
    } else 
    {
        $(this).removeClass('glyphicon-minus icon-minus');
        $(this).addClass('glyphicon-plus icon-plus');
        $('#detail-view'+this.id).toggle('slow');
    }
});

http://jsfiddle.net/gs4te89g/2/

您的代码中的问题是，当 dom 中不存在减号图标时，您将其绑定到该图标。

【讨论】：