Jquery nur einmal klicken

Question

Ich versuche, ein li Click-Ereignis zu deaktivieren, nachdem es das erste Mal geklickt hat. Im Wesentlichen um zu verhindern, dass die Array-Daten verdoppelt werden. Der Klick funktioniert für jedes Mal einwandfrei. Meine aktuelle Methode scheint nicht zu funktionieren. Ich brauche auch von den anderen li abzuschalten einmal hat die erste geklickt wird :)

Dank

JS-Code ist:

$('#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

jQuery nur JavaScript ist, so dass Sie leicht Verhaltensweisen hinzufügen können, die Sie

// 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); 
    }); 
    }); 
}; 

Nutzungs wie dieses

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

Allerdings würde aussehen wollen, ist dies offensichtlich ein gemeinsames Bedürfnis, so dass es bereits in jQuery existiert . Es heißt $.one. Wenn APIs wachsen, wissen Sie möglicherweise nichts über die Existenz solcher Verfahren. Diese Antwort existiert, um Ihnen zu zeigen, dass Sie Ihr Gehirn verwenden können, um die Dinge zu programmieren, die Sie benötigen oder die in einer bestimmten Bibliothek fehlen könnten. Dies verringert Ihre Abhängigkeit vom Schöpfer der Lib, um die von Ihnen benötigte Funktionalität einzuführen.

---

EDIT

In einem Kommentar, fragen Sie, ob der Event-Handler für alle anderen LI-Elemente deaktiviert werden kann, nachdem der erste LI angeklickt wird. Das Problem hier ist, dass jQuery implizite Iteration verwendet, was bedeutet, dass, wenn Sie $('li').on('click', ...) aufrufen, jQuery einen onclick Event-Handler für jeweils LI binden wird.

Eine bessere Lösung für dieses Problem wäre die Verwendung 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>

den Ereignis-Listener zu den Kindern LI Dies wird delegieren, aber sobald einer der LI geklickt wird, die Event-Handler wird entfernt (weil wir mit der $.one Prozedur delegiert haben).

Versuchen Sie, eine LI zu klicken, Sie werden eine Nachricht in der Konsole sehen. Wenn Sie auf die zweite LI klicken, wird nichts passieren, da der Event-Handler entfernt wurde.

Answer 2

Sie one verwenden müssen:

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

Dieses Ereignis wird nur einmal ausgelöst

UPDATE

Sie tun können, dass die Verwendung von $.off()

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

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); 
    } 
}); 

so, wie Sie es taten, war das Hinzufügen einer anderen nur auf Click-Handler, nicht entfernen oder die alte ond überschrieben.

Answer 4

Sie können CSS-Klassen verwenden; Fügen Sie die Klasse 'deaktiviert' zu Elementen hinzu, die Sie nicht benötigen, und vermeiden Sie das Hinzufügen von Elementen, bei denen die Klasse 'deaktiviert' ist.

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); 
    });