I have a link (a tag) which is given an onclick event and has dopostback enabled, when generated server-side.
To this link, I later bind a jquery click event.
The onclick event has return false; at the end of the function and the anonymouse function binded by jquery has return true;
When I click on the link the jquery function is run and the postback happens, but the code in the inline onclick event is not working.
I tried flipping around the return false and return true.
When the jquery function returns false, the code works in Chrome and FF, but not IE.
When the jquery function returns true, the code works in IE, but not in FF or Chrome.
I have also tried adding the inline code to the onmouseup event, but that does not help either.
Maybe I am missing something but why would one ever have jQuery do one thing with a bound event then have an onclick event on the element do another.
Just use jQuery to 2 both and don't forget to use e.preventDefault() as the first line of the function.
Post the relevant code and I will try to assist further.
Related
I understand I need to use the stopPropigation, but how do I get a reference to the event from an onClick function. And Also how do I find out how an event was attached to the element. So I have a simple button like this:
<button class="btn btn-default" onclick="addRoleToReportClicked()">
the function looks like this:
function addRoleToReportClicked() {
$('#addRoleDiv').show();
}
So Simple. And was working fine. Unitl I just did an update of code from work. Now it does show the div, but then proceeds to do other stuff, namely re-load the whole page.
I am using firefox and I see that the button now has a "bubbling" and "DOM0" event handlers. I would love to know how that got there, but more importantly 2 questions:
How do I stop this in the addRoleToReportClicked() function? (I assume that I can stopPropogation, but how do I get a handle to the event?
Is there any easy way to find what code is adding these event listeners? I tried the debug, but that did not show me anything. I don't want to go through 20+ js files and thousands of lines of code to find it. But I do want to hunt down the developer and shoot him.
UPDATE
I tried this:
$("#addRoleDivButton").unbind("click").on("click", function(e){
e.cancelBubble = true;
e.stopPropagation();
e.bubbles = false;
$('#addRoleDiv').show();
});
None of it worked. Taking the idea of a form submition, I noticed that all the other buttons on the page were working fine, but this one was inside a from. So I changed the tag from a "button" to an "a" and it works fine. Someone attached a submit() to every button inside a form tag. How do I stop a submit?
There are a bunch of ways you can stop bubbling, the most popular two ways are -
stop the propagation -
function addRoleToReportClicked(e) {
e.stopPropagation();
$('#addRoleDiv').show();
}
or, unbind the other handlers -
<button class="btn btn-default btn-1">
$(".btn-1").unbind("click").on("click", function(){
$('#addRoleDiv').show();
});
Since you haven't accepted any of the above answers, I'll add this here.
function addRoleToReportClicked(event) {
$('#addRoleDiv').show();
return false;
}
By adding the return false;, it should stop any other functions running. If this or any of the other solutions don't work then there must be something else refreshing the page.
Try and debug it yourself using the chrome or firefox debuggers.
1) the event is passed as argument to the callback function
function addRoleToReportClicked(event) {
event.stopPropagation();
$('#addRoleDiv').show();
}
stopPropagation() will prevent the event from trigger callbacks on parent elements.
You may want to use stopImmediatePropagation() in some cases: I leave to you to look for the difference
jquery: stopPropagation vs stopImmediatePropagation
Note that you may also/instead want to prevent the browser to execute its default actions: (for example a click on a link would also open the link, a click on a submit button would send the form).
In that case you have event.preventDefafult()
EDIT:
Note that if addRoleToReportClicked is invoked because you have
<button class="btn btn-default" onclick="addRoleToReportClicked()">
Then the event object is not passed to the function
You may remove the onclick attribute.
Then if you need to catch the click on the button use Jquery's on('click')
2) Google Chrome (Dev Tools) tells you what event listeners are attached to an element (just right-click and inspect the element).
AFAIK it doesn't tell you where on the code the event listener were set up.
But if you perform a global search on your sources for the name of the event listener you should find it.
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
I have an element #div_1 which has inside the same document (not extern file) a plain JS function:
var trigger = false;
var div_1 = document.getElementById('div_1')
div_1.onclick = function() { trigger = true; };
and in an extern JS file I have a jQuery button click on the same element:
$(document).ready(function() {
$('#div_1').click(function() {
// some actions here
});
});
The problem is that it does ignore the jQuery clickhandler completely. Is there no way to have two seperate click handler which work both?
There must be something else going on in your code because you can certainly have multiple event handlers on an object.
You can only have one handler assigned via onclick, but that should, in no way, interfere with the jQuery event handler. Please show us a reproducible demo in a jsFiddle because there is likely some other problem with your code causing this.
FYI, I'd strong suggest you not use the onclick attribute for event handlers because there is danger of one event handler overwriting another, something that does not happen when using .addEventListener() or jQuery's .click(). But, neither .addEventListener() or jQuery's .click() will overwrite the onlick.
Here's a working demo that shows both event handlers working just fine: http://jsfiddle.net/jfriend00/4Ge52/
I noticed sometimes that when I use jQuery, a extra '#' gets added to the end of my URL after a jQuery function is called. For example, the URL 'www.mywebsite.com' will change to 'www.mywebsite.com/#' once a jQuery function is initialized. The same for 'www.testsite.com/users.php', is changed to 'www.testsite.com/users.php#'.
Why does jQuery add the '#'?
If your function is running from a link onclick, you need to use event.preventDefault()
See http://api.jquery.com/event.preventDefault/
Probably you're getting this when handling a click event. If you don't want that happens, just add event.preventDefault() or return false at the end in event handler function.
Usually this is because you have a dummy link with a jQuery click handler. It's common to see links with an href of # that are only used to trigger some JavaScript.
Go
Resolve this easily by making a habit of calling e.preventDefault() in your click handlers:
$(function() {
$(".button").click(function(e) {
e.preventDefault();
...
});
});
You can also use return false, but that has the added effect of stopping event propagation. I like to add e.stopPropagation() explicitly if I also want that effect. It makes the code and it's intended effect more explicit and clear for future developers (or myself in 6 months).
I have event listener myObject.addEventListener('click',this.doSomething,false) on element.
It works fine when I do mouse click but I cannot figure out how to trigger click from JavaScript. It seems like element.click() does not work for divs?
I am using jQuery and I have also tried trigger('click') but nothing is happening.
How can I in JavaScript execute the EventListener?
Update:
Here is sample code http://jsbin.com/iniwi5/2
Can you bind the event using jQuery instead?
$(myobject).click(function() {
});
Then
myobject.trigger('click');
would programmatically trigger the click.
To trigger a click event listener added via addEventListener, you need to manually dispatch a click event, using either dispatchEvent (for standards-compliant browsers) or fireEvent (for IE < 9).
Try this:
myObject.click; // no `()`
OR:
(myObject.click)();