jQuery click function not working even after using document.ready() - javascript

I'm Trying to popup an alert when a button is clicked using jQuery but for some reason its not working.
$(document).ready(function () {
$("#find").click(function () {
alert("Hi");
});
});
Here is the link to code:Weather
Kindly let me what I'm I doing wrong.


You should try this instead.
$(function(){
$("#find").on('click',function () {
alert("Hi");
});
});

Related

Using the script i have, I am able to show .menu on click, but can not get it to disappear again on second click to return to default?

$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').show();
});
});

Try this:
$(document).ready(function(){
$('.nav').hide(); //Class nav in the begin should be closed.
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});
Hope 'll help you :)

Using toggle will work for you.
$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});

.on event not enabling click event

I have put together some simple code as an excercise and seem to be having a problem enabling a click event using .on('click'); method.
The .off event works fine but when i click the $('#bdReset').click(function (e) { it does not turn the click event on. I would be grateful if someone could point out my error or offer some advice as to how I can overcome this error. Many thanks
JS Version: jquery-1.11.1.min.js
Fiddle
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").off("click").addClass('disable');
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").on("click").removeClass('disable').css('cursor', 'pointer');
});
});

Try the sample code below
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").prop('disabled', true);
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").prop('disabled', false);
});
});

My jQuery will not activate

My jQuery will not activate on click as it should. I am targeting all class a divs
http://jsfiddle.net/clarinetking/BbSMW/6/ (JSFiddle)
$(document).ready(function () {
$(".a").click(function () {
$(this).fadeOut(default:400);
});
});

Your fiddle does not have jQuery in it and you forgot quotes:
$(document).ready(function(){
$('div').mouseover(function(){
$(this).fadeOut('slow');
});
});
New fiddle: http://jsfiddle.net/qwertynl/KMjG6/

How to open jQuery dialog on html CheckBox checked(using jQuery)?

I want to popup a jQuery dialog when a html checkbox is checked. I'm using following code. But it's not working.
$(document).ready(function () {
$('#chkBoxHelp').click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog();
}
});
});
And the html is as below:
<input type="checkbox" id="chkBoxHelp"/>
<div id="txtAge" style="display: none;">Age is something</div>
Please help me.
Also I want to uncheck the checkBox when popup will be closed. Checkbox is in a jQuery popup box. I need to open another popup on checkbox checked.
Thanks in Advance.

You can use open and close methods and close event.
Code:
$(document).ready(function () {
$('#chkBoxHelp').click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog({
close: function () {
$('#chkBoxHelp').prop('checked', false);
}
});
} else {
$("#txtAge").dialog('close');
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/V9zMx/

Try this, also closing if the checkbox is clicked again.
$(document).ready(function () {
var the_checkbox = $('#chkBoxHelp');
the_checkbox.click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog({
close: function () {
the_checkbox.prop('checked', false);
}
});
} else {
$("#txtAge").dialog('close');
}
});
});
Demo here

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});

Categories