Как предотвратить событие click на активном классе внутри другого события click с jQuery

Question

У меня есть несколько элементов, которые были получены из класса .active, нажав на них. Теперь мне не нужны никакие события щелчка, которые произойдут в любом классе .active. У меня много функций щелчка, что делает элемент active. Таким образом, для предотвращения щелчка по активным классам я написал функцию предотвращения в другом месте и вызываю их внутри каждой функции щелчка. Но это не сработало.

$('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(); 
    }); 
}; 

Как заставить его работать?

Fiddle work

Answer 1

использовать ниже код. с функцией jquery hasClass() вы можете проверить, имеет ли класс класс или нет. он возвращает true/false.

DEMO

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

Answer 2

обработчики событий работают в порядке их регистрации. Поэтому вам может потребоваться включить это событие по умолчанию в класс active в начало всех других событий кликов.

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

//Other event handlers code must be below 

Else связать событие .content и проверить класс там

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

Если щелчок является вопросом, что означает, что он имеет какое-то действие, привязанное к нему. Удалил бы действие из элемента решить проблему? Как и при щелчке, установите href ссылки на "".

Или просто поместите инструкцию if на свои входы и ссылки. Если у вас мало, это не должно быть трудной задачей.