Question

我尝试在第一次点击后点击一次点击事件。本质上是为了阻止数组数据加倍。点击每次都正常工作。我目前的方法似乎不起作用。我还需要禁用其他人在第一个人点击后点击其中：）

由于

JS代码是：

$('#eventType ul li').click(function(e) {
    e.preventDefault();
    var value = $(this).attr('value');
    answers.push(value);
    // Below isn't working
    $(this).click(function() {
        return false;
    });
    console.log(answers);
});

Answer 1

您需要使用one：

$('#eventType ul li').one('click',function(){
    //your code here
});

此事件只会被触发一次

<强>更新

你可以使用$.off()

来做到这一点

$('#eventType ul li').one('click',function(){
  //your code here
  $('#eventType ul li').off('click');
});

Answer 2

jQuery只是JavaScript，因此您可以轻松添加所需的行为

// basic jQuery plugin boilerplate
$.fn.once = function once(eventType, f) {
  // this = the selected elements
  return this.each(idx, elem) {
    // create reference to jQuery-wrapped elem
    var $elem = $(elem);
    // add event listener for eventType
    $elem.on(eventType, function(event) {
      // call the event handler
      return f(event);
      // remove the event handler
      $elem.off(eventType, f);
    });
  });
};

用法看起来像这样

$('#eventType ul li').once('click', function(event) {
  console.log("you will only see this once");
});

然而，这显然是一个常见的需求，因此它已经存在于jQuery中。它被称为$.one。随着API的发展，您可能不知道这些程序的存在。这个答案的存在是为了向您展示您可以使用您的大脑来编写您想要或可能从特定库中丢失的内容。这减少了您对lib的创建者的依赖，以引入您需要的功能。

修改

在注释中，您询问在单击第一个LI之后是否可以为所有其他LI元素禁用事件处理程序。这里的问题是jQuery使用隐式迭代，这意味着当你调用$('li').on('click', ...)时，jQuery将为每个 LI绑定一个onclick事件处理程序

解决此问题的更好方法是使用jQuery的event delegation

// only fire event handler for the first LI clicked $('ul').one('click', 'li', function(event) { console.log($(this).text()); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>one</li> <li>two</li> <li>three</li> </ul>

这会将事件监听器委托给子LI，但是一旦单击了一个LI，就会删除事件处理程序（因为我们使用$.one过程委托）。

尝试单击一个LI，您将在控制台中看到一条消息。当您单击第二个LI时，由于删除了事件处理程序，所以不会发生任何事情。

Answer 3

var used = false;
$('#eventType ul li').click(function(e) {
  if (used == false) {
    used = true;
    e.preventDefault();
    var value = $(this).attr('value');
    answers.push(value);
    console.log(answers);
  }
});

你这样做的方法就是在点击处理程序上添加另一个，而不是删除或覆盖旧的ond。

Answer 4

您可以使用CSS类;将“禁用”类添加到您不需要的元素，并避免添加具有“禁用”的classe元素。

https://plnkr.co/edit/6aloNPETHGxfiP5oYZ9f?p=preview

    $('ul li').click(function(e) {
        if(!$(this).hasClass('disabled')) {
          var value = $(this).text();
          answers.push(value);
          $('li').addClass('disabled');
        }

        console.log(answers);
    });

Jquery只点击一次

4 个答案: