2015-12-27 18 views
17

Sto cercando di aggiungere uno section a un div con un clic di un pulsante.Jquery: Aggiungi div una volta sola 'su clic'

Desidero aggiungere il numero section solo al primo clic, il codice che uso di seguito aggiunge uno section ogni volta che faccio clic su div.

Come devo fare questo?

$("#nextractorapply").click(function() { 
    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 
+0

Se questa è l'unica cosa che farà il pulsante, hai considerato di disabilitare il pulsante per impedire all'utente di continuare a fare clic su di esso? – Ellesedil

risposta

25

Si potrebbe utilizzare one(), che spara solo una volta

$("#nextractorapply").one('click', function() { 
    // executes only once 

    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 

$("#nextractorapply").on('click', function() { 
    // executes every time 

    // do other stuff 
}); 
+0

Il problema è che avrò alcuni eventi all'interno della funzione click che devono essere eseguiti ogni volta che clicco sul pulsante. Voglio solo che accada una volta e che gli altri eventi vengano eseguiti normalmente dopo aver fatto clic sul pulsante. –

+1

Quindi basta usare due gestori di eventi, io modificherò – adeneo

+0

@adeno Grazie mille per quello. Ho usato il '$ (" # nextractor "). Remove()' nello stesso gestore di eventi che funziona in qualche modo ma supponendo che abbia più appendi da fare, il numero di righe di codice aumenterebbe. Il tuo metodo è molto più semplice ed efficace :) –

7

Utilizzare un condizionale per determinare se è lì.

$("#nextractorapply").click(function() { 
    if($('#nextractor').length < 0){ 
     $("#main").append('<section id="nextractor" class="five"> </section>'); 
    } 
}); 
5

È possibile utilizzare una sorta di condizione che ne impedisce l'aggiunta più volte.

var counter=0; 
$("#nextractorapply").click(function() { 
    if(counter<=0){ 
     $("#main").append('<section id="nextractor" class="five"> </section>'); 
     counter++; 
    } 

    //YOUR OTHER STUFF THAT YOU NEED TO EXECUTE ON EVERY CLICK 
}); 
+0

Works perfect.thanks. – jane

3

Si potrebbe utilizzare .unbind()

$("#nextractorapply").unbind().click(function() { 
    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 
0

si potrebbe verificare se l'elemento ha una classe predefinita, aggiungere html. Ad esempio è possibile aggiungere una classe al codice html come: class = "first", e dopo il primo clic rimuovere quella classe.

Un codice simile a questo:

var element = $("#nextractorapply"); 
    if(element.hasClass("first")){ 
      $("#main").append('<section id="nextractor" class="five"> </section>'); 
      element.removeClass("first"); 
    } 

E poi dopo il primo scatto, la "prima" classe sarà rimosso dal vostro html e Jquery non aggiungerà ulteriori html.

Problemi correlati