The following code's else part isnt working, i.e. click is not getting enabled.
if
$("#section1").click(function(event){
return false;
});
else
$("#section1").click(function(event){
return true;
});
So basically, I want to remove the click functionality over a certain div section, which is working fine but while returning the click functionality back it is not working. Any suggestions?
You probably want to remove the click event rather than add another one that returns true.
Try (instead of the else bit):
$('#section1').unbind('click');
You need to unbind the click event. The reason being is if say this block of code gets called 3 times, that is putting 3 event handlers on #selection1 and each time it is clicked all three of those functions are called.
if
$("#section1").unbind('click');
else
$("#section1").bind('click', function(event){
return true;
});
$("#section1").click(function(event){
return false;
});
will disable its functionality
$("#section1").unbind('click')
will remove attached click event and let it do its work
$("#section1").click(function(event){
return false;
});
This will disable the click event from happening, whereas true continues the click event, I'm not sure what you want to achieve but you can use bind to attach an event, like so:
$("#section1").bind('click', function(){
alert('You clicked on it');
});
But to remove a click event, you would use the opposite; unbind.
Related
Kindly look at my code:
$('#myPanel').on('closed.bs.alert', function () {
// insert code here
});
I tried return false inside, and even passed event as parameter in function(){} and performed event.preventDefault(), but it still won't stop the alert from being closed. I need to prevent the alert from being closed in case some conditions that I will put will not be satisfied.
Perhaps this will work for you:
$('#myPanel [data-dismiss]').on('click', function () {
return false;
});
Instead of hooking into bootstrap's event we hook into the user's click of the dismiss button, and prevent bootstrap's event from triggering.
The reason the code wasn't working is that you were adding an event handler to the event that fires after the alert has already been closed and not the one before it closes. This is what you wanted:
$('#myPanel').on('close.bs.alert', function (e) {
e.preventPropagation();
});
Using return false; would also work but I try to use the event methods whenever I can since not all browsers interpret returning false from an event handler in the same way.
Problem
I have a .keypress() event inside of a .click() event. The first time the user clicks on the element, everything works fine, but subsequent clicks trigger the .keypress() event again without "closing" the first one. I've tried adding event.cancelBubble = true; and an empty return statement to break out of the function, but it hasn't worked because predictably, the rest of the code in that execution doesn't get executed but the event is still active and a key press could still trigger it. Is there a way to close the .keypress() event when foo gets clicked?
Code
$(foo).click(function(){
//Do stuff
$(foo).keypress(function(event) {
//Do stuff
});
});
do you mean keypress called more than once?
in your code, every time you click foo, a new anonymous function will be added to keypress event.
unbind the previous keypress event handler before binding new handler
$(foo).click(function(){
//Do stuff
$(foo).off('keypress').on('keypress', function(event) {
//Do stuff
});
});
I'm not entirely sure what you're asking but I think you want to turn off the keypress after the first click. This should toggle it though you may want to make the pressed var global; maybe.
$(foo).click(function(){
//Do stuff
var pressed = false;
$(foo).keypress(function(event) {
if(!pressed){
//Do stuff
pressed = true;
} else {
event.off();
pressed = false;
}
});
});
The key here is event.off() which will remove the listener.
I have a button that clears a list, the click on this button shows a dialog that asks for validation (Yes/No). What I want is to disable the "Clear" button after clearing the list (Click on Yes). Here's my code :
$('#clearBtn').click(function() {
$('#alert5').show();
$('#bg').show();
$('#Yes').click(function(){
$('.list1').empty();
$('#clearBtn').disable(true);
$('#clearBtn').click(function(e){
e.preventDefault();
});
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
});
the preventDefault() function doesn't seem to work.
First never nest event handlers.
$('#cleatBtn').click(function () {
$('#alert5').show();
$('#bg').show();
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
If you just want to disable then use the following syntax
$('#cleatBtn').attr('disabled', true);
Remove the innermost event completely.. That is not required.
Use on to bind the events, if you want the button to be enabled but turn off the event handler using off
One more option you have is to apply a class to the button when you press yes and execute the code only when the class is not present.
$('#cleatBtn').click(function () {
if( !$(this).hasClass('active')) {
$('#alert5').show();
$('#bg').show();
}
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$('#cleatBtn').addClass('active');
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
To disable a button, call the prop function with the argument true on it:
$('#cleatBtn').prop("disabled", true);
e.preventDefault(); is the correct way of cancelling events. Some older browsers also expect a return type of false. Which I think will cause jQuery to call preventDefault()?
Here's a good answer: What's the effect of adding 'return false' to a click event listener?
I think your structure looks a bit odd. you don't need to attach click events within a click event.
Just attach them all separately on document.ready events. At the moment they are nested, then go back to trying to cancel your event. The dom tree might be confused by the way the events are nested.
Hope that helps.
I'm trying to get a form to show and hide using two different triggers. One element when clicked shows the div holding the form, then the cancel button of the form hides the div.
I've tried several options and cannot get this to work so I've stripped it down and put the code here on jsfiddle (link)
The containing div shows but then won't hide... any suggestions?
Just return false from the cancel handler.
Otherwise the click event bubbles, and since the button is nested inside the li element that opens the form, both elements receive the click.
The cancel button tries to hide it and then the li re-opens it..
$("#h-nav li#hn-contact #cancel").click(function() {
$("#h-nav li#hn-contact").find("div.dd").hide();
return false;
});
demo at http://jsfiddle.net/gaby/5CpeW/2/
Notice, since id are unique, you do not have to describe the hierarchy in your jquery selectors. Just use a selector from the last id and forward..
This is due to event bubbling. Use return false in click event's callback.
$("#h-nav li#hn-contact #cancel").click(function() {
$("#h-nav li#hn-contact").find("div.dd").hide();
return false;
});
For more information on this subject, go to Events Order It's worth understanding when you're going to be dealing with javascript in the future.
That actually gives you the cross-browser way of stoping propagation:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
try:
$("#h-nav li#hn-contact").click(function() {
$(".dd").show();
});
But it would be better to give that div an id and use that.
I would also suggest using toggle() rather than show/hide as then you don't need to change the manually behaviour when it is clicked
I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
and then the submit event:
function modal_submit(the_id){
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
}
finally all of this is inside of a getScript:
$.getScript('js/edit.js',function(){
create_edit_btn();
});
I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.
Does anyone have any ideas? :\
EDIT:
the html is:
<li>
<input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">
<p>Hosting for your web site</p>
</li>
An event can have multiple event listeners. Each time you use $(element).submit(whateverFunction) you are adding another whateverFunction to the submit event. If you only want only the last listener to be the action that is taken upon envoking the event, try doing this:
function modal_submit(the_id){
$('#modal form').unbind(); // this will remove all other event listeners from this element
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
I think you event.stoppropagation does its job already. It stopped all the bubbling on the click event of the button (ie, if you try checking the document body, it won't have mouse click event anymore). The reason why codes within submit of the form is still executed, is because this is called by the button's default action.
Together with event.stoppropagation(), I suggest you include this:
event.preventDefault();
So that the default action will not used and only the codes within your handler is executed.
Is this in the function that creates edit buttons?
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
If it this, then it will add this handler multiple times to the same elements, causing a flurry of alerts. Use live, which will place the handler on every matched element, even if is is added later in execution.