Question regarding jQuery click() function - javascript

$('document').ready(function(){
$('[name=mycheckbox]').live('click', function(){
if($(this).is(':checked'))
{
alert('it is checked');
}
else
{
alert('it is not checked');
}
});
$('[name=mycheckbox]').click();
});
If the checkbox is checked and you click it, the alert box says, "it is not checked", but when the page runs and the click event is fired (with the checkbox checked), the alert box says, "it is checked". Why? Is the state of the checkbox not effected by the click event? Is it mousedown that changes the state?

Instead of click you should use the change event here, like this:
$('[name=mycheckbox]').live('change', function(){
And invoke it with the same trigger, like this:
$('[name=mycheckbox]').change();
The click is separate from the change, if you want the event to fire when the check actually has finished changing, then you want change, not click. Alternately, if you want to toggle it from it's initial state still, do this:
$('[name=mycheckbox]').click().change();

Instead of the live event (which I've found to be buggy at best) try binding a normal click even instead. I've done something similar which works fine with a .click event not .live("click",
I hope that helps :S

What is happening is quite subtle.
I have a button and checkbox linked to the following code:
$("#chkbx").click(function() {
if ($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
$("#MyButton").click(function() {
$("#chkbx").click();
});
When I click on the checkbox, everything is displayed as you would expect.
When I click on the button, the reverse is true.
What is happening, is that when you click on the checkbox, it is firing the default click event before executing your code, and thus you code is taking the status from the aftermath of the default click event.
When you call the click method directly on the element, it is actually calling your click function and then executing the default event.
I'm not why this should be. or if this is intentional, or a bug.

Related

Can cancel onclick event after blur(focusout)?

Because I have a check function, and check function happens in textarea when blur and click save button.
All things are good except one case. When I in textarea, I directly click the button. This will happen twice check (first check to happen in a blur, and then happen in onclick event). I don't like it.
I solve this problem using two methods.
1: Use one flag to detect whether check before. When click saves button, check this flag.
2: Use mouse-down replaces of onclick method and event.preventDefault. This first check will happen mouse-down, and not trigger blur.
I think the other method. Firs check happens in a blur, and then "not" happen in onclick event. So I want to know Can cancel onclick event after blur(focus out)? If not why? (I don't know how to cancel or I don't find solutions. Thanks.
Code like
blur() {
checkfunction();
}
onclick() {
checkfunction();
save();
}
you can use event.stopPropagation();
example:
blur(){
// code textarea
};
onclick(e){
e.stopPropagation();
// code button
};

Possible bug in fullcalendar's eventClick?

Here is the code snippet in question:
eventClick: function(calEvent) {
if(user != calEvent.modified_by && calEvent.modified_by != 0){
$('.antoconfirm').css("display", "inline-block");
}
$('#fc_edit').click();
$('#title2').val(calEvent.title);
//-----------Submit button click-------------------
$(".antosubmit2").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
calEvent.title = $("#title2").val();
calEvent.confirm = 0;
calEvent.backgroundColor = '#ddbd39';
dbTitle = calEvent.title;
//ajax goes here, works fine
calendar.fullCalendar('updateEvent', calEvent);
$(".antosubmit2").off("click");
$('.antoclose2').click();
});
//---------------------------------------------------
//-----------Close button click-------------------
$(".antoclose2").on("click", function() {
console.log(calEvent.title);
$(".antoclose2").off("click");
});
//---------------------------------------------------
return false;
},
$('#fc_edit').click(); calls the modal in which the editing is done. There are two buttons with the classes "antosubmit2" and "antoclose2". You click on an event, the modal comes up, you change the title, click submit, the modal goes away and voila, the title is changed(from "new1" to "new3" in this example):Test events, title change
When ONLY the submit button is used, everything works fine, you can change one event after the other without incident. On the other hand, when you use the close button on one event and try to change the title on another, the first event will be changed:Test events, title change after close
Now at the "ajax goes here, works fine" part is an ajax POST, that sends the correct data despite what the calendar shows and after a page reload everything is edited the way it should be.
Is this a bug with fullcalendar's event rendering or does my code fail somewhere?
I think you need to run .off against all your button click handlers whenever any of your buttons is used. At the moment you only remove the handler for the button that was actually clicked. If you don't remove them, those handlers will remain and get used again if the other button is clicked in future. This is exactly the scenario you have run into.
In the case you described, I suspect because when you closed the first event, you didn't remove the "click" handler related to the "submit" button that went with that event. Then, when you changed the title of the second event, it ran the "click" handler for both events, because you never removed the first handler. Hence why the title for the first event gets changed when it shouldn't.

Chekbox click event not getting triggered on checked

I have a checkbox with id myopt and I have a click event handler as below;
$("#globalBody").on("click", "#myopt", function (event) {
if ($(this).prop("checked")) {
// do something
} else {
// do something
}
});
Now in my code, I do
$("#myopt").attr("checked",true);
My question is this does not trigger the click event handler above. It gets called if I click the checkbox manually.
What is the issue ?
You need to use .trigger() to programmatically invoke the click handler
Execute all handlers and behaviors attached to the matched elements for the given event type.
Script
$("#myopt").prop("checked",true).trigger('click');
Note: I would recommend you to use change event
$("#globalBody").on("change", "#myopt", function (event) {
if (this.checked) {
// do something
} else {
// do something
}
});
//Change
$("#myopt").prop("checked",true).trigger('change');
Check this fiddle please https://jsfiddle.net/kwp7sjwf/2/
I have two versions depending on what you need. As I understand it, what you want is to click somewhere inside the #globalBody and check the state of myopt checkbox. In the above fiddle I did that, but I've placed in comments a code block that handles the 2nd version which is the case where you want to listen only when myopt checkbox state changes (clicks directly on the checkbox).
Hope it helps

alert if nothing happens on click

essentially I am wondering if it is possible to write a function so that if any item inside a specific container is clicked and nothing happens, it will alert that the feature has not been made available yet.
explanation:
what I mean by nothing happens is that the DOM or site does not change. So if a javascript or jquery function is called on click, it would not alert. if the item is a link to another site, it would not alert. but if nothing happens on the click event of an item inside a specified container, then it would alert.
The closest you could come would be to:
bind a click event handler to the container that would check if the event target was a link to another site and, if not, display the alert
make sure you stopPropagation() on all your event handlers.
Like this?
jsFiddle
$('a').on('click', function() {
if ($(this).attr('href') == '#') {
alert('the feature has not been made available yet.');
return false;
} else {
return true;
}
});

JS jQuery Hiding element on unfocus stops other events from being fired

I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!
You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.
Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.
Try using .css('visibility', 'hidden') instead of .hide which uses display:none.

Categories