So I'm modifying a webpage, it has a button, it is coded so mouseup goes to a link, I want to change this, adding mouseup functions don't work; mousedown works but I have to hold the mousedown for a second or two otherwise the original function still occurs.
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
$(siq).mousedown(function(){
window.location = 'https://www.google.com/search?q='+duma+'&sxsrf=APq-WBtOrInsFht_VAH6gWFlCceGK46ylQ:1649149133894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjdvbqix_z2AhWtxzgGHW7GCh0Q_AUoAXoECAIQAw&biw=1366&bih=696&dpr=1';
})
This works but I have to keep the mouse held down for a lil bit
Changing that to mouseup doesn't work
I inspected the element further, it had an attribute named formAction which had the link to the respective page. Changing said attribute solved the first problem. But now the page is going to google web instead of images...
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
$(siq)[0].formAction='https://www.google.com/search?tbm=isch&q='+duma+'';
When you add an event listener, you're creating a function (that is a Javascript object) and binding it to a specific event.
To remove the listener, you have to pass to .removeEventListener() a reference to that same function.
Working with jQuery, there's also the element.off('event_type') method, but it works only on listeners previously attached with the jQuery .on('event_type') method.
If the listener refers to a named function you can do element.removeEventListener('event', functionName).
If the listener is an anonymous function I'd do one of these:
A) clone the element with jQuery clone() method, so that the cloned element will not have any event listeners attached anymore. Then you could attach your own listeners.
B) if you don't need the original event listener, you can also disable it doing like this:
function stopEvent(event) {
event.stopImmediatePropagation();
}
element.addEventListener('mouseup', stopEvent, true);
This way, using the true option in .addEventListener, you stop any event propagation at the beginning of the capturing phase, so the event itself will never reach its target (for that mouseup event only).
The cons of the second option is that you cannot use that event anymore on that element, as it will never reach the target.
But, as you used a named function to stop the propagation, you can now remove it with element.removeEventListener('mouseup', stopEvent, true) and bring back the original event listener to work again (because removing stopEvent, now the event propagates again to its target).
Figured it out. Needed to change form values.
Used the info on google search forms from link.
https://stackoverflow.com/a/65032682/10824788
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
var derka = 'https://www.google.com/search?tbm=isch&';
$(siq)[0].form[2].name="q";
$(siq)[0].form[2].value=duma;
$(siq)[0].form[4].name="tbm"
$(siq)[0].form[4].value="isch"
$(siq)[0].formAction=derka;
I have an input type="image". This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this input-image is paired with, I setup an event handler for the input-image. Then when the user clicks the image, they get a little popup to add some notes to the data.
My problem is that when a user enters a zero into the text box, I need to disable the input-image's event handler. I have tried the following, but to no avail.
$('#myimage').click(function { return false; });
jQuery ≥ 1.7
With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions. The below would now be,
$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');
jQuery < 1.7
In your example code you are simply adding another click event to the image, not overriding the previous one:
$('#myimage').click(function() { return false; }); // Adds another click event
Both click events will then get fired.
As people have said you can use unbind to remove all click events:
$('#myimage').unbind('click');
If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:
$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });
and to remove just your event:
$('#myimage').unbind('click.mynamespace');
This wasn't available when this question was answered, but you can also use the live() method to enable/disable events.
$('#myimage:not(.disabled)').live('click', myclickevent);
$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });
What will happen with this code is that when you click #mydisablebutton, it will add the class disabled to the #myimage element. This will make it so that the selector no longer matches the element and the event will not be fired until the 'disabled' class is removed making the .live() selector valid again.
This has other benefits by adding styling based on that class as well.
This can be done by using the unbind function.
$('#myimage').unbind('click');
You can add multiple event handlers to the same object and event in jquery. This means adding a new one doesn't replace the old ones.
There are several strategies for changing event handlers, such as event namespaces. There are some pages about this in the online docs.
Look at this question (that's how I learned of unbind). There is some useful description of these strategies in the answers.
How to read bound hover callback functions in jquery
If you want to respond to an event just one time, the following syntax should be really helpful:
$('.myLink').bind('click', function() {
//do some things
$(this).unbind('click', arguments.callee); //unbind *just this handler*
});
Using arguments.callee, we can ensure that the one specific anonymous-function handler is removed, and thus, have a single time handler for a given event. Hope this helps others.
maybe the unbind method will work for you
$("#myimage").unbind("click");
I had to set the event to null using the prop and the attr. I couldn't do it with one or the other. I also could not get .unbind to work. I am working on a TD element.
.prop("onclick", null).attr("onclick", null)
If event is attached this way, and the target is to be unattached:
$('#container').on('click','span',function(eo){
alert(1);
$(this).off(); //seams easy, but does not work
$('#container').off('click','span'); //clears click event for every span
$(this).on("click",function(){return false;}); //this works.
});
You may be adding the onclick handler as inline markup:
<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />
If so, the jquery .off() or .unbind() won't work. You need to add the original event handler in jquery as well:
$("#addreport").on("click", "", function (e) {
openAdd();
});
Then the jquery has a reference to the event handler and can remove it:
$("#addreport").off("click")
VoidKing mentions this a little more obliquely in a comment above.
If you use $(document).on() to add a listener to a dynamically created element then you may have to use the following to remove it:
// add the listener
$(document).on('click','.element',function(){
// stuff
});
// remove the listener
$(document).off("click", ".element");
To remove ALL event-handlers, this is what worked for me:
To remove all event handlers mean to have the plain HTML structure without all the event handlers attached to the element and its child nodes. To do this, jQuery's clone() helped.
var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);
With this, we'll have the clone in place of the original with no event-handlers on it.
Good Luck...
Updated for 2014
Using the latest version of jQuery, you're now able to unbind all events on a namespace by simply doing $( "#foo" ).off( ".myNamespace" );
Best way to remove inline onclick event is $(element).prop('onclick', null);
Thanks for the information. very helpful i used it for locking page interaction while in edit mode by another user. I used it in conjunction with ajaxComplete. Not necesarily the same behavior but somewhat similar.
function userPageLock(){
$("body").bind("ajaxComplete.lockpage", function(){
$("body").unbind("ajaxComplete.lockpage");
executePageLock();
});
};
function executePageLock(){
//do something
}
In case .on() method was previously used with particular selector, like in the following example:
$('body').on('click', '.dynamicTarget', function () {
// Code goes here
});
Both unbind() and .off() methods are not going to work.
However, .undelegate() method could be used to completely remove handler from the event for all elements which match the current selector:
$("body").undelegate(".dynamicTarget", "click")
I know this comes in late, but why not use plain JS to remove the event?
var myElement = document.getElementById("your_ID");
myElement.onclick = null;
or, if you use a named function as an event handler:
function eh(event){...}
var myElement = document.getElementById("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it
This also works fine .Simple and easy.see http://jsfiddle.net/uZc8w/570/
$('#myimage').removeAttr("click");
if you set the onclick via html you need to removeAttr ($(this).removeAttr('onclick'))
if you set it via jquery (as the after the first click in my examples above) then you need to unbind($(this).unbind('click'))
All the approaches described did not work for me because I was adding the click event with on() to the document where the element was created at run-time:
$(document).on("click", ".button", function() {
doSomething();
});
My workaround:
As I could not unbind the ".button" class I just assigned another class to the button that had the same CSS styles. By doing so the live/on-event-handler ignored the click finally:
// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");
Hope that helps.
Hope my below code explains all.
HTML:
(function($){
$("#btn_add").on("click",function(){
$("#btn_click").on("click",added_handler);
alert("Added new handler to button 1");
});
$("#btn_remove").on("click",function(){
$("#btn_click").off("click",added_handler);
alert("Removed new handler to button 1");
});
function fixed_handler(){
alert("Fixed handler");
}
function added_handler(){
alert("new handler");
}
$("#btn_click").on("click",fixed_handler);
$("#btn_fixed").on("click",fixed_handler);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
<button id="btn_add">Add Handler</button>
<button id="btn_remove">Remove Handler</button>
<button id="btn_fixed">Fixed Handler</button>
I had an interesting case relevant to this come up at work today where there was a scroll event handler for $(window).
// TO ELIMINATE THE RE-SELECTION AND
// RE-CREATION OF THE SAME OBJECT REDUNDANTLY IN THE FOLLOWING SNIPPETS
let $window = $(window);
$window.on('scroll', function() { .... });
But, to revoke that event handler, we can't just use
$window.off('scroll');
because there are likely other scroll event handlers on this very common target, and I'm not interested in hosing that other functionality (known or unknown) by turning off all of the scroll handlers.
My solution was to first abstract the handler functionality into a named function, and use that in the event listener setup.
function handleScrollingForXYZ() { ...... }
$window.on('scroll', handleScrollingForXYZ);
And then, conditionally, when we need to revoke that, I did this:
$window.off('scroll', $window, handleScrollingForXYZ);
The janky part is the 2nd parameter, which is redundantly selecting the original selector. But, the jquery documentation for .off() only provides one method signature for specifying the handler to remove, which requires this middle parameter to be
A selector which should match the one originally passed to .on() when attaching event handlers.
I haven't ventured to test it out with a null or '' as the 2nd parameter, but perhaps the redundant $window isn't necessary.
I'm curious if there is a way to add event listeners to form fields which are dynamic and not present at page load? My issue is I'm working with a form which is dynamic and changes based on selections made. The issue is, I need to attach event listeners to specific fields in the form but on page load, not all these form elements exist? For example, the dropdown below will always exist on the page:
`var employmentStatusSelect = document.getElementById('mainForm:cont_appRequestStatus');
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);`
but the next field will show if there is a specific selection from above element
var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
Since it doesn't exist when the page loads, I can't attach an event listener to it and the above code throws an error. Is there any way to attach the event listener to the 2nd element once it appears? JavaScript only, please! * I cannot make changes to the form or page and can only inject my code via a Tag Management system *
Update a better way. Turn out if you add a blur event listener to form, all input element will trigger that event too. https://developer.mozilla.org/en-US/docs/Web/Events/blur
var form = document.getElementById('mainForm');
form.addEventListener('blur', function( event ) {
if(event.target.matches('#cont_appRequeststart_job')){
console.log('blur event triggered');
}
}, true);
// add input
var input = document.createElement('input');
input.id = 'cont_appRequeststart_job';
form.appendChild(input)
<form id="mainForm">
</form>
You can keep trying every 0.5s until the element exists. Not recommended.
function tryBindEvent(){
var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
if(startCurrentJobInput){
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
}else{
setTimeout(tryBindEvent, 500);
}
}
tryBindEvent();
You can attach a event listener on the document body and check the element type inside the callback and do the modifications.
document.addEventListener('change', function(e) {
if(e.target && e.target.id === 'mainForm:cont_appRequeststart_job') {
//do something
}
});
First of all, if you share more codes, you may get better help. But, I guess what you should do is to run a function (I will call it assign() for now) to assign a value to startCurrentJobInput when employmentStatusSelect has a value.
So, I recommend you to define startCurrentJobInput variable globally like this (I guess you would need it globally to use in other funcs):
var startCurrentJobInput;
And do not add event listener yet. Then, when employmentStatusSelect is selected and new form element created, run assign func to assign document.getElementById('mainForm:cont_appRequeststart_job') to startCurrentJobInput. Then, you can add event listener to it with:
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
I have a code like this:
<td>
<span class='ui-button-next'>NEXT</span>
</td>
This application contains a library and it is not allowed to be edited. On clicking "ui-button-next", they are calling event.stopImmediatePropagation() to stop something.
I want to call a function when user clicking on this "span" without touching that Library.
My custom code is like:
$(".ui-button-next").click(function(){
});
$(".ui-button-next").bind("click",function(){
});
$(".ui-button-next").on("click",function(){
});
are not working due to event.stopImmediatePropagation() on the library.
any workaround?
You can access the underlying events list (array) and insert your new click handler at the first, it will be triggered normally, however note that the order of execution should not be a problem in your case:
//this is the inner handler
$('.ui-button-next').click(function(e){
e.stopImmediatePropagation();
});
//this is the handler of your own
$('.ui-button-next').click(function(e){
alert('OK');
});
//get click handlers list
var clicks = $._data($('.ui-button-next')[0], 'events')['click'];
//get the last added handler (which is your own handler) and put it at the beginning
clicks.unshift(clicks.pop());
Demo.
UPDATE: To keep the order of execution (the default handlers are executed first, all the additional added handlers are executed after), I think you have to modify the default handlers by removing all the e.stopImmediatePropagation() methods, we have to use the eval() method here. Note that using that method in this case is totally OK.
//get click handlers list
var clicks = $._data($('.ui-button-next')[0], 'events')['click'];
//remove the e.stopImmediatePropagation() in each handler
$.each(clicks, function(i,e){
var handlerText = e.handler.toString()
.replace(/e.stopImmediatePropagation\(\)/g,'');
eval("e.handler = " + handlerText);
});
Updated demo.
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/