i am having a problem when i click on an input(button) (click event captured using jquery) it is executed two times but the click event is single... i used "e.stopPropagation();" - but it didn't work...
jQuery("#ok").click(function(e){
alert("Alert");
e.stopPropagation();
});
i need the reason and the solution...
take care..
problem is solved...
i just added e.stopImmediatePropagation(); to the click function... and it worked... None of the following functions worked...
e.preventDefault();
e.stopPropagation();
return false
---------------------CODE---------------------
jQuery("#ok").click(function(e){
alert("Alert");
e.stopImmediatePropagation();
});
Click here for more information on jQuery Events..
Please use e.stop(true,true) and function which you are using. like
e.stop(true,true).show();
I think you use this code as below:
jQuery("#ok").click(function(){
alert("Alert");
return false;
});
e.preventDefault() is likely what you are looking for.
i used
return false;
after the desired action.
Related
I am creating a responsive menu: Codepen Demo
To avoid the page to be reloaded when I click a link I have:
$('nav.menu a[href="#"]').click(function () {
$(this).preventDefault();
});
But this does not seem to work. When I click a button the menu disappears.
Does anyone knows what I am be doing wrong?
It's not the element that need a .preventDefault(), its the click event.
Try this:
$('nav.menu a').click(function (event) {
event.preventDefault();
// or use return false;
});
I don't recommend to use the href as selector though, better to give it an id or name.
From MDN, about .preventDefault():
Cancels the event if it is cancelable, without stopping further propagation of the event.
You can read more here:
MDN: event.preventDefault()
jQuery: Selectors
There is a CSS way, using pointer-events.
So by using in the CSS pointer-events: none; all click will be ignored. This is a "recent" alternative and suported in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.
Example
Here is very easy way to do it inside html.
<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>
Just return false.
$('nav.menu a[href="#"]').click(function () {
return false
});
Use like that:
$('nav.menu a[href="#"]').click(function (event) {
event.preventDefault();
});
$('nav.menu a[href="#"]').click(function (e) {
e.preventDefault();
});
Try this:
$('.menu a').click(function(e){
e.preventDefault(); // stop the normal href from reloading the page.
});
Working codepen example: http://codepen.io/anon/pen/cynEg
You did not have a reference to the jquery library included. Also the 'enquire' function is now throwing an error but preventDefault is working.
Edit I have commented out the second function.
And an inline option without jQuery:
Link
And don't forget that with this you have already used the "f" name for a function, so don't name other function like this.
Using the following function to capture two dynamically generated form submissions, but is not preventing their submission.
$('body').delegate('.edit_faq, .new_faq', 'submit', function(e){
e.preventDefault();
//voodoo
});
I was using the following, using live. This works, but live is depreciated and the end result is for this code to end up in a flexible plugin.
$('.edit_faq').add('.new_faq').live('submit', function(e){
e.preventDefault();
//magic
});
What you have written is actually working.
check:
http://jsfiddle.net/peuqU/
press run as jsfiddle sometimes needs a refresh before testing submits.
I have only been able to test it with chrome 23.
Try on which is the recommended way, and return false:
$('body').on('submit', '.edit_faq, .new_faq', function(e){
e.preventDefault();
//Do your stuff here.
});
As to why the submission still occurs, maybe you have a JS error somewhere in the page?
FIXED--
The problem was that the code required being wrapped on a document onReady:
$(document).ready(function(){
$('body').on('submit', '.edit_faq, .new_faq', function(e){
e.preventDefault();
//voodoo
});
})
I occurs to me that since live did not require the ready, that maybe this is still wrong?
I cannot get the following simple jQuery to work. I know I am overlooking something, so please help me out. Here is the code at http://jsfiddle.net/Z5waA/. It's a simple click the button, then alert with jQuery.
preventDefault(e); should be e.preventDefault();
code should be like this,
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
and you need to add jQuery reference.
You had a couple issues. First, the jsFiddle wasn't set for jQuery. Then, your call to preventDefault wasn't correct. It works here: http://jsfiddle.net/jfriend00/v9aVb/.
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
Use e.preventDefault() instead of preventDefault(e).
I have a tag, and when 'focused' I display a . When I click on the document body I would like this to close. However, this doesn't seem to work when using two different event types:
<input id='input' />
<div id='div style='display:none;'>
</div>
$('#input').focus( function(e){
e.stopPropagation();
$('#div').show()
});
$(document).click( function(){
$('#div').hide();
});
It appears that the e.stopPropagation() only stop propagation of the 'onfocus' event. Since when I switch the code to be: $('#input').click(), then it works fine.
Just curious if there is anyway to make this work with the above code? (would like to know JS a bit better)
Thanks!
You can simply do this
$('#input').bind('focus blur', function() {
$('#div').toggle();
})
Check working example at http://jsfiddle.net/u9xwb/
You're right, it only kills the event you are subscribed to, you need to stop the click event as well on the input.
$('#input').focus( function(e){
e.stopPropagation();
$('#div').show();
}).click( function(e){
e.stopPropagation();
});
$(document).click( function(){
$('#div').hide();
});
i use jquery treeview http://docs.jquery.com/Plugins/Treeview/treeview
i want to catch click on text node and do something
i use such code
$('li').live('click', function(){
alert(this.id);
return false; });
but if i click on '+' it calls my js code, and then node expand. how can i blocked to call my js code? i know about call e.stopImmediatePropagation(); but how can i use it here?
Try this
$('li').live('click', function(event){
event.stopPropagation();
alert(this.id);
return false; });
If you are still choosing tools for your task, you should try jsTree, a jQuery plugin with plenty of resources and configuration options.