Question

我有一个div对象，当它包含类＆＃34; clickable ＆＃34;时，它应该是可点击的。在Click功能中，我删除了＆＃34; 可点击的＆＃34; class，但单击对象时仍会触发。即使我删除课程，它会继续开火吗？

HTML ：

<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
    <div class="info-wrap">
        <div class="vote-wrap">
            <div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
                <i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
                <i aria-hidden="true" class="icon no-vote  far fa-thumbs-up"></i>
            </div>
            <div class="existing-wrap d-none">
                <div class="inner">
                    <span class="separator">/</span>
                    <span class="count">0</span>
                </div>
            </div>
        </div>
        <div class="caption-wrap">
            <h2 class="caption">Close Up</h2>
        </div>
    </div>
</div>

的jQuery ：

$("div.vote-wrap > div.circle.clickable").click(function () {
    let $circle = $(this);

    $circle.removeClass("clickable");
}

Answer 1

使用委托事件on()并使用A = 28.57 a = 14.29 G = 14.29 g = 42.86取消绑定点击事件，以获取动态创建的元素。

＆＃13;

unbind('click')

＆＃13;

$("div.vote-wrap > div.circle.clickable").on('click',function () {
    let $circle = $(this);

    $circle.removeClass("clickable");
    $circle.unbind('click');
});

＆＃13;

Answer 2

因为您在点击回调中没有unbind该事件。

您只需删除该课程。

＆＃13;

$("div.vote-wrap > div.circle.clickable").click(function() {
  let $circle = $(this);

  $circle.removeClass("clickable");
  $(this).unbind('click');//unbind the click event
  alert('clicked , and unbind now!');
})

＆＃13;

div.vote-wrap > div.circle.clickable {
  background:pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
  <div class="info-wrap">
    <div class="vote-wrap">
      <div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
        <i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
        <i aria-hidden="true" class="icon no-vote  far fa-thumbs-up"></i>
      </div>
      <div class="existing-wrap d-none">
        <div class="inner">
          <span class="separator">/</span>
          <span class="count">0</span>
        </div>
      </div>
    </div>
    <div class="caption-wrap">
      <h2 class="caption">Close Up</h2>
    </div>
  </div>
</div>

＆＃13;

和另一种方式：

＆＃13;

$("div.vote-wrap").on('click','div.circle.clickable',(function() {
  let $circle = $(this);
  $circle.removeClass("clickable");  
  alert('clicked');
}))

＆＃13;

div.vote-wrap > div.circle.clickable {
  background:pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
  <div class="info-wrap">
    <div class="vote-wrap">
      <div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
        <i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
        <i aria-hidden="true" class="icon no-vote  far fa-thumbs-up"></i>
      </div>
      <div class="existing-wrap d-none">
        <div class="inner">
          <span class="separator">/</span>
          <span class="count">0</span>
        </div>
      </div>
    </div>
    <div class="caption-wrap">
      <h2 class="caption">Close Up</h2>
    </div>
  </div>
</div>

＆＃13;

Answer 3

连接元素事件处理程序是在连接侦听器时确定的，而不是在发出事件时确定的。

您可以像这样重写代码：

// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
    let $circle = $(this)

    $circle.removeClass("clickable")
})

要解决您的问题，请查看此问题的答案：Event binding on dynamically created elements?

即使在jQuery中删除了类名，也会触发Click事件

3 个答案: