disable click after clicking on $('body').on('click') event - javascript

hi I want to disable click after the user clicked on an element
the elements loaded after my script (elements built by javascript) and I can't use these code
$('.disableClick').click(
function (e) {
e.stopPropagation();
return false;
}
)
and I use these code to do work on the element by click
$('body').on('click','.disableClick',
function (e) {
if(!is_valid)
{
e.preventDefault();
e.stopPropagation();
return false;
}
}
);
I think disabling click codes like e.stopPropagation() don't support for
$('body').on('click')
event

try this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('body').on('click','.disableClick',
function (e) {
$(this).attr("disabled", true);
}
);
</script>
It works on body as well as on document both

You need to use unbind I guess.
Try
if(!is_valid){
$('selector').unbind("click")
}

Related

jQuery event listener fires before selector applied

I am trying to make a system that would require an admin to click a delete button twice before it fires the action. if he focusout of the button, it resets.
$(".unarmed").css("filter", "grayscale(1)").removeClass("armed").click(function(e) {
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
$("body").on("click", ".armed", function() {
alert("boom");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="plus.png">
I've seen jQuery event listener fires before selector applied? but adding e.stopPropagation() causes the second click to not fire.
when e.stopPropagation() is not in the code, it does fire the second click, but together with the first click (i think this means the problem is not with the second click selector)
here is a fiddle with e.stopPropagation():
https://jsfiddle.net/3jyr72t6/
also, if you have suggestion for making it prettier, i'm open for suggestions :D
#icecub answer as snippet:
$(document).ready(function() {
$(".unarmed").css("filter", "grayscale(1)");
$(".unarmed").click(function(e) {
if ($(this).hasClass("armed")) {
console.log("boom");
}
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://kns.im/include/img/plus.png" style="width:50px">
You can always just use the jquery dblclick event. Jquery dblclick
$(document).on("dblclick",".btn-delete",function(){
console.log("DELETE");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-delete">DELETE</button>
You can use a simple function to detect click outside the element .. See the next example
$("img.unwait").on("click" , function(e){
let $this = $(this);
if($this.hasClass("unarmed")){
$this.removeClass("unarmed").addClass("armed");
}else if($this.hasClass("armed")){
alert("BOOM");
$this.removeClass("armed").addClass("unarmed");
}
});
detect_click_out(".armed" , function(){
$(".armed").removeClass("armed").addClass("unarmed");
});
function detect_click_out(element_selector , action){
$(document).on('click',function(e){
if (!$(element_selector).is(e.target) // if the target of the click isn't the container...
&& $(element_selector).has(e.target).length === 0) // ... nor a descendant of the container
{action();} // run the action as a function
});
}
img{
width : 50px;
}
.unarmed{
filter : grayscale(1);
}
.armed{
filter : grayscale(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg">

Double click on Disabled radio button is initiating click event in IE11

Is there any workaround to prevent the click on disabled radio button if it is in disabled mode.
$(document).ready(function() {
$(document).dblclick(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return false;
});
});
I tried the above code but still ondblclick event is initiating on my radio button in disabled mode.
You can use css to avoid clicking on radio button
.avoid-clicks {
pointer-events: none;
}
I have implemented following fiddle.Hope it helps you.
$(document).ready(function() {
$('#test').prop('disabled',true);
// document.getElementById('test').disabled=true;
$('#test').dblclick(function (e) {
if(e.target.disabled==true)
return;
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log("test");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio"/>

Checking if an element has a specific class in jquery not works

I am stopped up with a very simple functionality that worked with me many times back but not working right now.No specific errors in console also.
I am trying to check if there is a specific class for a div containing .form-content.inactive classes.I am trying to find if there is another class opened .
My codes are below mentioned
$(document).ready(function() {
if($('.form-content.inactive').hasClass('opened')){
$(".form-content a").click(function(event) {
alert('has');
});
}
});
No alerts are given on click.I am stupid now for a while :p
If your div hasn't the class opened from the beginning, you should do it this way.
$(document).ready(function() {
$(".form-content a").click(function(event) {
if($('.form-content.inactive').hasClass('opened')){
alert('has');
}
});
});
Otherwise your code could work.. When your div has the class opened already before the document became ready, only then jQuery is able to subscribe your click element to the event.
$(document).ready(function() {
if ($('.form-content.inactive').hasClass('opened')) {
$(".form-content a").click(function(event) {
alert('has');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Click!</a>
</div>
Instead of checking for opened you could use a delegate:-
$(document).ready(function() {
$('body').on('click', '.form-content.inactive.opened a', function(event) {
alert('has');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Link</a>
</div>
This will fire the click event for a if the .form-content has both classes .inactive and .opened.
If you insist on using hasClass and you have multiple .form-content then you should use this to get the closest .form-content and check for both classes.
$(".form-content a").click(function(event) {
var formContent = $(this).closest('.form-content');
if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
alert('has');
}
});

Custom Context Menu on everything except "input" in jQuery

I want to add custom context menu with jQuery for the whole body of the page, except the textfields. How can I do that?
I have tried that code:
$('body:not(input)').bind('contextmenu', function(){
/*code*/
});
Check the srcElement before plugin executions. If it's not an input element, do trigger the contextmenu plugin:
$(document).on("contextmenu", function(e) {
if (!$(e.srcElement).is(":input")) { // if it's not an input element...
$(this).triggerTheContextMenuPlugin();
}
});
Use an event listener on the document and check if it was initiated by an input element.
$(document).on("contextmenu", function (e) {
if (e.target.tagName.toUpperCase() === "INPUT") {
console.log("context menu triggered");
}
});
Demo here
Inspired by Salman's solution.
You can stop the event propagation in all input elements, with the e.stopPropagation() function. In doing so, you keep the default behavior of the inputs elements:
$(function() {
$(document).on("contextmenu", function(e) {
alert("Context menu triggered, preventing default");
e.preventDefault();
});
$("input").on("contextmenu", function(e) {
e.stopPropagation();
});
});
JSFiddle Demo

Temporarily disable button using jQuery

I would like to disable a button element without removing the listener, for example I have ths following code:
<input id="in" />
<button id="sub">Submit</button>
$('#sub').click(function (e) {
//Some actions
});
$($('#in').keyup(function (e) {
if (new Date($(this).val()) == 'Invalid Date') {
$(this).addClass('invalid');
$('#sub').addClass('disabled');
}
else {
$(this).removeClass('invalid');
$('#sub').removeClass('disabled');
}
});
I would like to unbind the button click listener, but if I'll use off() or unbind() I will have to 're-bind' it in the else clause.
Is there any better way of doing this?
How about disabling the button instead of adding a class?
HTML:
<button>Disable Me</button>
JS
$(function() {
$("button").click(function() {
alert("click!");
$(this).prop("disabled", true);
});
});
CSS
button[disabled] {
color: red;
}
Here is a jsFiddle to demonstrate.
use $('#sub').prop('disabled');

Categories

Resources