Using jQuery, I want to add a click event to a search button that happens after the event that is already tied to that button in the HTML (the other click event is in the tag's onclick event, it is NOT added by javascript).
I've tried using .click(function() {...}); but that event will fire before the inline onclick event already on the button. How can I run my click event after the first one has completed?
One thing you can do is grab the inline events when the page loads and evaluate them before your custom click event code.
Something like this:
var events = $('#someAnchor').attr('onclick');
$('#someAnchor').removeAttr('onclick');
$('#someAnchor').click(function(){
eval(events);
alert("We came second");
})
Here's a quick example: http://jsfiddle.net/vkVuP/
Related
I'm new to JS, just a dumb question on event listener, I know how to add an event listener, but confused with what really it is, below is some code:
document.getElementById("myBtn").addEventListener("click", function(){
...
});
and I was reading a book which says sth like this:
event in the listing is triggered when the mouse button is clicked on the host element, and the event provides its listeners with ...
so can I say the listener in this case is the button element(with id myBtn)? or listener is a property of button element?
A listener is an event of DOM element, in this case, the click event is an event of your button myBtn that fires when a user makes a click in the primary button.
You can get more info from here
To answer your question in very simple terms:
There are three javascript constructs to look out for in this code
document.getElementById("myBtn").addEventListener("click", function(){ ... });
They are:
the event
The actual event that occurs on the page. This can be triggered by a user, another event, or can be time-triggered.
the event listener
This is an internalised javascript software construct that can be initialized by the programmer to listen for various events that occur on the page.
the event handler
This is a function created by the programmer and passed to the event listener to execute whenever an event occurs i.e. handle the event.
Interestingly, the only thing you can see explicitly in the above code is the event handler - function(){ ... }. Why? Because it is the only thing the programmer explicitly creates in the code.
So, the code can be read as -
get my button with id myBtn.
initialize an Event Listener to listen for click Events on this button and
delegate an anonymous Event Handler to execute when this event occurs.
I have this script that is design to execute a function when you click outside of the targeted element hence the simple solution is to use the blur event. I used
blur on the input file and it is not working how I expect it to work. This is what I notice when I click on the input file, it instantly execute the function. How can I
prevent that? I want to be able to click on the input file element and then click any where that is outside of that input file element to be able to execute the
targeted function. If it's not possible with the blur method then what other methods can I use to do something like that?
document.querySelector('#x').addEventListener('blur',fx);
function fx(){
alert('ok')
}
<input id='x' type='file'>
The event is triggered immediately since the input element blurs if either the window dialog opens or you let go of your mouse while the cursor is on top of the button because the input element is the button.
You will have to write your own custom function that deals with that scenario. window.addEventListener('blur', blur) and window.addEventListener('focus', focus) may be useful to this end.
FWIW, here is a list of every single JS event.
I am using google translator which creates dynamically translator bar,it has show original button (click on below image link).
I want to fire click event of "show original" button manually using javascript or jquery but is is not working, see some of the code snippets that i tried.
$("#myBtn").click(function(){
$("#\\:1\\.restore").click();
//or
$("#\\:1\\.restore").on('click');
//or
$("#\\:1\\.restore").trigger('click',jQuery.Event( "click" ));
//or
document.getElementById(':1.restore').click();
})
imageURL: http://1drv.ms/1KhfLbo
The event on myBtn is not fired and your event handler is not working.
For dynamically added elements use event delegation.
$(document).on('click', '#myBtn', function() {
// Your Code Here
});
To trigger event:
$("#\\:1\\.restore").trigger('click');
You need delegate from a container such as document
$(document).on('click', '#\\:1\\.restore', function(){...}));
I want to fire click event of "show original" button manually
Use
$('#\\:1\\.restore').trigger('click')
or
$('#\\:1\\.restore').click();//with no parameters
I got the answer.
Actually translate bar was inside iframe tag, so we need to select iframe (container) then any element inside that.
$("#myBtn").click(function(){
$('#\\:1\\.container').contents().find('#\\:1\\.restore').click();
});
I have an app where clicking a link brings up a modal. In the modal is a form. I need to monitor for that form's submission.
I'm attaching a click handler in my JS like so:
$('.vex-dialog-form :submit').click (event) ->
alert "hi"
That alert isn't firing, I believe it's because I need to attach some kind of event handler for that modal loading then put the submit event inside of that.
Any suggestions on how to go about this?
you need event delegation for dynamically added DOM. use .on():
$('.vex-dialog-form').on('click',':submit',function(){
alert("hi");
});
if parent .vex-dialog-form is also getting added dynamically, then use:
$(document).on('click','.vex-dialog-form :submit',function(){
alert("hi");
});
Try this way:
$(document).on('click', '.vex-dialog-form :submit', function(){
alert('hi');
});
In this case document is waiting for click and after it gets clicked, jQuery finds out whether your submit button is clicked or not
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.