Question

我有这个HTML结构：

<div id="groupList">
  <div class="element">
    <span class="label label-default" data-index="0">
      big big big big big big big name!.txt
      <i class="fa fa-times"></i>
    </span>
  </div>
</div>

<i>是一个很棒的图标，可以移除.element。

如果我在jQuery中选择：

$(document).off('click').on('click', '#groupList .element > span', function()

它有效。但是我想只在用户按下i里面的图标时执行该功能。类似的东西：

$(document).off('click').on('click', '#groupList .element > span > i', function()

但这不起作用。我在这里缺少什么？

Answer 1

我建议，给出HTML：

// Select the <i> element with the 'fa' and 'fa-times' class-name,
// that exists within an element matching the '.element' selector';
// when that <i> element is clicked:
$('.element i.fa.fa-times').on('click', function () {

  // remove the closest ancestor element matching the
  // '.element' selector:
  $(this).closest('.element').remove();
});

＆＃13;

$('.element i.fa.fa-times').on('click', function () {
  $(this).closest('.element').remove();
});

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupList">
  <div class="element">
    <span class="label label-default" data-index="0">
      big big big big big big big name!.txt
      <i class="fa fa-times"></i>
    </span>
  </div>
</div>

＆＃13;

参考文献：

Answer 2

试试这个

$(function(){

    $(document).off('click').on('click', '#groupList .element > span i', function(){

    alert();
    });

});

查看FIDDLE LINK

在子跨度内选择“i”元素

2 个答案: