In the following example https://jsfiddle.net/anu4nits/449d5j8e/
<input type="text" id="in" />
<input type="button" value="click" id="button" />
$('#in').change(function () {
console.log('change event');
dialog.dialog("open");
});
$('#button').on('click', function (e) {
console.log('click event');
});
I have attached two events one is onchange event on text and other is click event on button. If I write something in textbox and clicks on button then handler of change event and handler of click event should get executed respectively. But as I am invoking the modal-dialog in the handler of change event, handler of click event is not getting executed, which is expected as modal- dialog won't allow any background activity. But this is only with Chrome and Mozilla. In IE handler for both the events are getting executed.
I want consistent behaviour for all browsers preferably I don't want click handler execution in IE. I also don't want to put some flag at global level for condition checking. Also I can't detach the event from button as in my application button ID and its handler are generating at runtime. Is there any other way I can stop the execution of click event from the handler of change event.
Click and Change both are separate events and they have their own stack. So you can't stop propagation of one from another as their target element are also different.
What you can do is to attach event at their common parent so that you have a common handler for them. There you can set flag and perform what you want.
I needed to prevent from immediate execution of a next function defined in the same onchange, e.g.:
<input onchange="Dont(this);Work()">link</input>
Here I needed the Dont() to conditionally stop all further functions like the Work(). I simply threw an exception, because anything else didn't work.
function Dont(button){
if($(button).data("somecondition")){
throw "NeedToStopEveryFurtherCodeExecution!";
}
}
The event.stopImmediatePropagation(); didn't help. I'm not sure why but I think there is an issue when using an external .js file.
I think this is simpler than to workaround this using conditions in every function that may be passed in the onchange. I hope this is not a really bad/deprecated way.
use stopPropagation, but easier solution is to go with a flag
$('#in').change(function(e) {
console.log('change event');
dialog.dialog("open");
e.stopPropagation();
});
Related
In my latest code, I have an event handler for a focus on a textarea. When the user clicks on the textarea, that event-handler is triggered which sets some other DOM states based on the selected textarea. However, elsewhere in my program I want to programmatically set the focus of the textarea without triggering that event handler. I know Backbone, for instance, has a way to silently perform an action.
My only pseudo-solution is to temporarily set a variable:
var silence = true;
And then, in my event handler, only perform the logic if silence is false. The handler is still triggered, but the logic doesn't run.
Does anyone else know of better strategies for this?
You could temporarily unbind() the event, like this:
You have the following scenario where you handle the focus event:
function focus_handler() {
//focus handler code
...
...
}
$('#yourelement').bind('focus', focus_handler);
And now on the part of the code where you want to programmatically focus the element without triggering the event handler:
$('#yourelement').unbind('focus');
$('#yourelement').focus();
$('#yourelement').bind('focus', focus_handler);
<input type="text" name="input" id="input" value="0">
<input type="text" name="input" id="input2" value="0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#input').focus(function(a,b) {
if (b) alert('forced');
});
$('#input').trigger('focus', jQuery.Event("focus"));
});
</script>
When b argument of the event handler is present, the event is triggered by invoking $('#input').trigger('focus', jQuery.Event("focus"));. So you can make you handler function execute depending on normal focus or forced focus.
In jQuery, trigger() can take an event namespace. Only events bound with this namespace, and default behaviour, will be triggered.
So for example:
$('#yourelement').trigger('focus.anyOldNonsense');
should do the trick (provided no-one has used "anyOldNonsense" as an event namespace).
Edit: This works in 1.7.2 and 1.8.3, but there is a known bug in 1.9 onwards for adding data and namespaces to a "focus" event.
Since you can't prevent the event from happening, you need some kind of intermediary that decides whether or not to emit the event. So you would have the intermediary listen for all focus events and you'd have to tell that intermediary whether or not to re-emit the event. Then you'd listen on that intermediary rather than the dom node directly.
click here
try this hack to set onClick functions with params without firing them on instantiation.
I have a page with div and a button on it. I have added onClick event to both of them. Now when I click the button on the div the onClick of the div is also being executed. Is there any way that I can avoid this?
Thank You,
Try this, pass the event as parameter to your onclick event and call
event.stopPropagation();
event.preventDefault();
Your onclick event assignment should be:
$(button).click(function(event) {
// script here
event.stopPropagation();
event.preventDefault();
});
In your click handler you might want to use "stopPropagation" for example:
$("button").click(function(e) {
// handle this event
// ...
// don't pass this event up to parent handlers
e.stopPropagation();
} );
There's also a related function that you might want to read about called "preventDefault" which tells the browser not to do what it normally does automatically (e.g. submit a page when a submit button is clicked)
See also:
https://developer.mozilla.org/en/DOM/event.stopPropagation
http://api.jquery.com/event.stopPropagation/
What's the effect of adding 'return false' to a click event listener?
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
in the listener for the link element, you can put e.stopPropagation(), which should fix it (if you're using event bubbling).
If you aren't using jQuery, make sure you set the useCapture parameter of addEventListener() to False info - MDN; you want to be sure you know which direction your events are moving through the DOM (you want them to bubble).
You need to prevent the button onClick event from bubbling to the Div. So basically at the end of your onClick function for the button, once you have done all you logic, you need to call event.stopPropagation()
If none of the above work, try out:
$("button").click(function(e) {
e.stopImmediatePropagation();
});
Inside of an onclick event, I'm binding another onclick event. But when I initiate the first event, the second always executes:
var MiniMenu = {
show : function(menu_id, element){
// this doesn't have any thing to do with the problem - I think
position = $(element).offset();
$('#' + menu_id).css({
left : position.left,
top : position.top + 13
}).show();
// Why is this event called on the first click,
// even though it isn't bound at that time?
$(document).click(function(){
alert('here')
$('.mini-menu').hide();
$(document).unbind('click')
})
}
}
I'm using Adobe Air - if that helps :)
I guess because the click-event just bubbles up ;-)
Think of the following: you have a stack of event handlers assigned to the click event, probably most of them without you knowing of their existance
Your click handler <-- currently executing
...
System click handler 2 <-- already finished
System click handler 1
Now while executing, your click handler adds another listener to this event.
New click handler
Your click handler <-- currently executing
...
System click handler 2
System click handler 1
When your first click handler finishes, the click event just gets passed to the next listener in the queue (this is called bubbling), because you don't prevent the event propagation. That means that after Your click handler returns, you have the following situation:
New click handler <-- currently executing
Your click handler
...
System click handler 2
System click handler 1
This may be a bubbling issue. Is the first click event's source element something inside of your document? (or is it the document, as is the second click event handler?)
Events bubble up to the container all the way to the document. If you're handling the event on an image or something, and then setting the click event handler on something up the chain, it may be fired right afterward.
$(document).click(function(){
alert('here')
$('.mini-menu').hide();
$(document).unbind('click')
})
This binds the click to the document really, so ANY click anywhere in the document will cause this to be activated...
I would need more information to be able to isolate what you REALLY want to do with this even.
EDIT: Just to add some info, you may want to return FALSE side the event to prevent the event from propagating (bubbling) up the document and to stop. Study the event handling documentation for jQuery for more tangible results pertinent to your situation.
EDIT2: to explain, when you bind the DOCUMENT here, once the function completes, the document still has the event and then activates it at that time (after the function)... I hope I am explaining this so it makes sense.
I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site.
Live events do not bubble in the
traditional manner and cannot be
stopped using stopPropagation or
stopImmediatePropagation. For example,
take the case of two click events -
one bound to "li" and another "li a".
Should a click occur on the inner
anchor BOTH events will be triggered.
This is because when a
$("li").bind("click", fn); is bound
you're actually saying "Whenever a
click event occurs on an LI element -
or inside an LI element - trigger this
click event." To stop further
processing for a live event, fn must
return false
It says that fn must return false so what I tried to do
$('.MoreAppointments').live('click', function(e) {
alert("Hi");
return false;
});
but that did not work so I am not sure how to make it return false.
Update
Here is some more information.
I have a table cell and I bind a click event to it.
$('#CalendarBody .DateBox').click(function(e)
{
AddApointment(this);
});
So the AddApointment just makes some ui dialog box.
Now the live code(MoreAppointments) sits in this table cell and is basically an anchor tag. So when I click on the anchor tag it first goes to the above code(addApointment - so runs that event first) runs that but does not launch my dialog box instead it goes straight to the (MoreAppointment) event and runs that code. Once that code has run it launches the dialog box from "addApointment".
Update 2
Here is some of the html. I did not copy the whole table since it is kinda big and all the cells repeat itself with the same data. If needed I will post it.
<td id="c_12012009" class="DateBox">
<div class="DateLabel">
1</div>
<div class="appointmentContainer">
<a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a>
</div>
<div class="appointmentOverflowContainer">
<div>
<a class="MoreAppointments">+1 More</a></div>
</div>
</td>
The short answer is simply, you can't.
The problem
Normally, you can stop an event from "bubbling up" to event handlers on outer elements because the handlers for inner elements are called first. However, jQuery's "live events" work by attaching a proxy handler for the desired event to the document element, and then calling the appropriate user-defined handler(s) after the event bubbles up the document.
(source: shog9.com)
This generally makes "live" binding a rather efficient means of binding events, but it has two big side-effects: first, any event handler attached to an inner element can prevent "live" events from firing for itself or any of its children; second, a "live" event handler cannot prevent any event handlers attached directly to children of the document from firing. You can stop further processing, but you can't do anything about processing that has already occurred... And by the time your live event fires, the handler attached directly to the child has already been called.
Solution
Your best option here (so far as I can tell from what you've posted) is to use live binding for both click handlers. Once that's done, you should be able to return false from the .MoreAppointments handler to prevent the .DateBox handler from being called.
Example:
$('.MoreAppointments').live('click', function(e)
{
alert("Hi");
return false; // prevent additional live handlers from firing
});
// use live binding to allow the above handler to preempt
$('#CalendarBody .DateBox').live('click', function(e)
{
AddApointment(this);
});
I've used such kind if code and it worked for me:
$('#some-link').live('click', function(e) {
alert("Link clicked 1");
e.stopImmediatePropagation();
});
$('#some-link').live('click', function(e) {
alert("Link clicked 2");
});
so, it seems to me, that now JQuery support stopImmediatePropagation with live events
Maybe you could check that the click event didn't occur on an a element:
$('#CalendarBody .DateBox').click(function(e) {
// if the event target is an <a> don't process:
if ($(e.target).is('a')) return;
AddApointment(this);
});
Might Work?
I'm using this:
if(event.target != this)return; // stop event bubbling for "live" event
I use
e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
I've used this in certain situations. Note: not always applicable, so assess for your needs as always:
html:
Click me
js (in your live event handler):
if(e.target.className == 'my-class-name') {
e.preventDefault();
// do something you want to do...
}
This way, my live event only 'runs' when a particular element type/classname attr is clicked.
The e.preventDefault() here is to stop the link I'm clicking moving the scroll-position to the top of the page.
Simply use **"on"** function to bind click event of child as well as parent element.
Example : $("#content-container").on("click","a.childElement",function(e){
alert("child clicked");
e.stopPropagation() ;
});
$("#content-container").on("click","div.parentElement",function(e){
alert("parent clicked");
});
( where content-container is the outer div containing both parent as well as child elements. )
Here only "child clicked" alert will occur.
Thanks.
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.