Question

我有一个列表HTML结构在下面

<li class="game-box showlist" id="papp_1249" data-tag="Junior KG,Maths">
  <div class="game-box-link" 
       data-id="1249" data-active="yes" data-orientation="landscape" 
       data-ajax="false" data-url="http://totsmart.in/scale_concept" 
       data-transition="none">

    <img src="http://example.com/abc.jpg" class="game-thumb">
  </div>
  <div class="game-title">
    <div class="btn-container">
      <a href="#login" class="box-btn4">
        <img src="css/assets/Login.png">
      </a>
      <div class="box-btn4 price-btn">
        //clicking this using trigger
        <span class="game-price buy" data-id="">Free</span>
      </div>
      <span class="sm_box-btn expand">
            <img src="css/assets/drop.png">
        </span>
      <div data-id="1249" data-active="yes" data-orientation="landscape" 
           data-ajax="false" data-url="http://example.in/scale_concept" 
           data-transition="none" class="game-box-play-link sm_box-btn">

        <img src="css/assets/Play.png">
      </div>
    </div>
    <div class="game-content">
      <p><strong>Subject</strong>: Maths
        <br>
        <strong>Class</strong>: KG – KG – Junior &amp; Senior
        <br>
        <strong>Description</strong>
        <br>Drag and drop objects to one out of the two empty boxes and practice the scale concepts like – Big-Small, Fast-Slow, Tall-Short etc.
      </p>
    </div>
  </div><span class="game-box-title">Scale concepts</span>
</li>

我的JavaScript功能是

$("body").on('vclick', '.game-box-link, .game-box-play-link', function (e) {
    e.preventDefault();
    var application_id = $(this).data('id');
    console.log('game-play-clicked');
    check_app(application_id, this);
});

check_app(application_id, item)
{
      alert('clicked');
      var game_id = $(item).data('id');
        if ("ios" != deviceType()) {
            $('#papp_'+game_id+' .buy').trigger("vclick");
            console.log('triggered');
        }
}

我的问题是，当我第一次点击game-box-link div时，check_app()呼叫一次，如果我第二次点击它check_app()要求2次，依此类推。我需要它只被召唤一次。我哪里错了？

这是我的控制台日志的屏幕截图。你可以看到它开火7次：

Answer 1

将e.stopPropagation();添加到您的函数中。

$("body").on('vclick', '.game-box-link, .game-box-play-link', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var application_id = $(this).data('id');
    console.log('game-play-clicked');
    check_app(application_id, this);
});

check_app(application_id, this)
{
      alert('clicked');
}

孩子的点击事件也发生在父母身上，这就是多次触发事件的原因。

函数调用多次

1 个答案: