Come impedire l'evento click su una classe attiva all'interno di un altro evento click con jQuery

Question

Ho diversi oggetti che sono stati ottenuti nella classe .active facendo clic su di essi. Ora, non ho bisogno di eventi di clic accaduti in qualsiasi classe .active. Ho molte funzioni di clic che rendono l'articolo active. Quindi, per evitare di fare clic sulle classi attive, ho scritto la funzione di prevenzione in un altro posto e le ho chiamate all'interno di ogni funzione di clic. Ma non ha funzionato.

$('body').on('click', '#one', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 
$('body').on('click', '#two', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 

function noClickOnActive() { 
    $('body').on('click', '.content.active', function(event) { 
     event.preventDefault() 
     event.stopPropagation(); 
    }); 
}; 

Come farlo funzionare?

Fiddle work

Answer 1

utilizzo qui di seguito il codice. con la funzione jquery hasClass() puoi controllare se l'elemento ha classe o no. restituisce vero/falso.

DEMO

$('body').on('click', '#one', function() { 
    if($(this).hasClass('active')){ 
     return false; 
    } 
    $(this).addClass('active'); 
    alert('clicked'); 
}); 

Answer 2

gestori di eventi lavorano nell'ordine in cui sono registrate. Potrebbe quindi essere necessario inserire questo evento predefinito di prevenzione nella classe active nella parte superiore di tutti gli altri eventi di clic.

$('body').on('click', '.content.active', function(event) { 
    event.preventDefault() 
    event.stopPropagation(); 
}); 

//Other event handlers code must be below 

Else legano l'evento per .content e controllare per classe ci

$('body').on('click', '.content', function(event) { 
 
if($(this).hasClass("active")) { 
 
    event.preventDefault() 
 
    event.stopPropagation(); 
 
} else { 
 
    $(this).addClass("active"); 
 
} 
 
});

.content { 
 
display: inline-block; 
 
border: 1px solid yellow; 
 
margin-right: 10px; 
 
padding: 5px; 
 
} 
 
.content:hover { 
 
cursor: pointer; 
 
} 
 
.content.active { 
 
background: yellow; 
 
cursor: inherit; 
 
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<div class="content" id="one"> 
 
<p>Click Me</p> 
 
</div> 
 
<div class="content" id="two"> 
 
<p>Another Click Me</p> 
 
</div>

Answer 3

Se, facendo clic è il problema, che significa che ha una certa azione legato ad esso. La rimozione dell'azione dall'elemento risolverà il problema? Come su clic, imposta il link href su "".

O semplicemente inserire un'istruzione if nei propri input e collegamenti. Se non ne hai molte, non dovrebbe essere un compito difficile.