Develop Reference

Is there a more efficient way to change the style of the clicked buttons?

I have about 40 button on the project but my example shows only four. My code is very repetitive and wondering if there's a lighter approach or language? I'd like to hide or change style of the clicked button/s.
$("[data-id='1']").on('click', function() {
$("[data-id='1']").css('visibility', 'hidden');
});
$("[data-id='2']").on('click', function() {
$("[data-id='2']").css('visibility', 'hidden');
});
$("[data-id='3']").on('click', function() {
$("[data-id='3']").css('visibility', 'hidden');
});
$("[data-id='4']").on('click', function() {
$("[data-id='4']").css('visibility', 'hidden');
});
button {
margin: 20px 0 0 20px;
padding: 5px 30px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id='1' class="hope">1</button>
<button data-id='2' class="hope">2</button>
<button data-id='3' class="hope">3</button>
<button data-id='4' class="hope">4</button>
Thanks
http://jsfiddle.net/05cempj7/

This function operates on all elements having the .hope class.
$(".hope").on('click', function() {
$(this).css('visibility', 'hidden');
});
If clicked on any hope class $(".hope") then $(this) reefers to the element that is clicked on.

parent div click function not run if i click to child div

HI i have face to one issue in my code
$(document).ready(function() {
$(document).on('click', '.rohit', function() {
alert('rohit');
})
$(document).on('click', '.azad', function() {
alert('azad');
})
});
.rohit {
width: 200px;
height: 100px;
background: green;
}
.azad {
width: 100px;
height: 50px;
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello
<div class="azad">
hello azad
</div>
</div>
if i click to azad div than rohit div also trigger alert how to stop to this
i m using to this seriousness in angular js

You can use stopPropagation to avoid triggering the listener of the parent element:
$(document).ready(function(){
$(document).on('click','.rohit', function(){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation();
alert('azad');
})
});
.rohit{width:200px;height:100px;background:green;}
.azad{width:100px;height:50px; background:gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello <div class="azad">
hello azad
</div>
</div>

You can use event stopPropagation() method. This method prevents the event propagation to the parents.
$(document).ready(function(){
$(document).on('click','.rohit', function(e){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation()
alert('azad');
})
});
Here is the fiddle link https://jsfiddle.net/9c54tow6/

:not selector with <a> in <div>

I have an a in a div and want to change the window location on click of div.
<div class="div-class">
</div>
$(document).on("click", ".div-class:not(.a-class, .a-class-2)", function() {
window.location = "/somewhere-else";
}
When clicking on either a, a new tab opens and the current window changes location. I want it to be that if you click on any a it will open a new tab, if you click on the containing div it will change window location.

To achieve this you can hook to the a elements directly and call stopPropagation() on the event passed to the handler. This will stop the event bubbling to the div and will ensure only the new tab is opened.
Similarly, you can hook to the click event of the div element to call window.location.assign() to change the page URL. Try this:
$(document).on("click", ".a-class, .a-class-2", function(e) {
e.stopPropagation();
console.log('a clicked');
}).on('click', '.div-class', function() {
console.log('div clicked');
// location.assign("/somewhere-else"); // commented out to stop breaking the snippet
});
/* this is only to make the hit areas more obvious in the snippet */
a { border: 1px solid #C00; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
a-class
a-class-2
</div>

Rory's answer works, but I don't think it needs two handlers or to call stopPropagation (which can be harmful). You can filter on the event target using jQuery.is
$(document).on("click", ".div-class", function(event) {
if (!$(event.target).is(".a-class, .a-class-2")) {
console.log("going /somewhere-else");
}
// You could also do
if( $(event.target).is(".div-class") ) {
console.log("going /somewhere-else v2");
}
});
a { background-color: #eee; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
link 1
link 2
</div>

JQuery - Disable submit button unless original form data has changed

I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.
I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true);
Can someone please provide a sample. I have no hair left to pull out :-)

The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.
$('form')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
var $form = $(this).closest("form");
var state = $form.serialize() === $form.data('serialized');
$form.find('input:submit, button:submit').prop('disabled', state);
//Do stuff when button is DISABLED
if (state) {
$("#demo").css({'display': 'none'});
} else {
//Do stuff when button is enabled
$("#demo").css({'display': 'block'});
}
//OR use shorthand as below
//$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="tb1" type="text" value="tbox" />
<input name="tb2" type="text" value="tbox22" />
<input type="submit" value="Submit" />
</form>
<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>
And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.

You can change the hover style of the button using css. CSS has hover state to target:
[type='submit']:disabled {
color: #ddd;
}
[type='submit']:disabled:hover {
background-color: grey;
color: black;
cursor: pointer;
border: none;
border-radius: 3px;
}
[type='submit']:disabled {
color: #ccc;
}
For showing and hiding, there are many tricks to do it. I think following would be the simplest trick to do and and easier for you to understand.
Add this in your html
<div id="ru" class="hide">this is russia</div>
<div id="il" class="hide">this is israel</div>
<div id="us" class="hide">this is us</div>
<div id="in" class="hide">this is india</div>
Add this in your css
.hide {
display: none;
background: red;;
}
Update your javascript like following:
$('form').bind('change keyup', function () {
.....
// get id of selected option
var id = $("#country-list").find(":selected").val();
$('.hide').hide(); // first hide all of the divs
$('#' + id).show(); // then only show the selected one
....
});
Here is the working jsfiddle. Let me know if this is not what you are looking for and I will update the answer.

The detection of change occurs on change input event.
You can change your code to the following in order to use this calculated value:
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
var changed = $(this).serialize() != $(this).data('serialized');
$(this).find('input:submit, button:submit').prop('disabled', !changed);
// do anything with your changed
})
.find('input:submit, button:submit')
.prop('disabled', true)
It is good if you want to work with other divs. However, for styling, it is better to use CSS :disabled selector:
For example, in your CSS file:
[type='submit']:disabled {
color: #DDDDDD;
}
[type='submit']:disabled {
color: #CCCCCC;
}

Put event handler on a HTML button without overriding its default functionality?

I'm trying to modify a contact form so that the submit button is disabled for five seconds after being clicked, to prevent accidental repeat submissions.
The problem is that disabling the button (by setting its 'disabled' attribute) prevents it from actually submitting. Setting any kind of even handler on them seems to override the default action, even though I'm not using .preventDefault();.
Is there a way I can bind a click event handler to a button that will operate in addition to its pre-existing functionality?
Here's the code I'm using:
jQuery(function() {
jQuery(":submit").on('click', function(e) {
jQuery(this).attr('disabled','disabled');
});
});

DEMO: http://jsfiddle.net/souviiik/4AsHc/
HTML
<form action="#" id="myForm">
<input type="text">
<input type="submit" value="Submit" class="btnSubmit">
</form>
JQUERY
var st;
$("#myForm").on("submit", function () {
if ($(".btnSubmit").hasClass("btnDisabled")) {
return false;
} else {
alert("clicked!");
$(".btnSubmit").addClass("btnDisabled");
st = setInterval(enableBtn, 5000);
}
});
function enableBtn() {
$(".btnSubmit").removeClass("btnDisabled");
clearInterval(st);
}
CSS
.btnSubmit {
background: #d33;
color: #FFF;
border: 1px solid #d33;
}
.btnDisabled {
background: #fefefe;
color: #aaa;
border: 1px solid #aaa;
}

if you want to use submit button only once you can use jquery .one() function