I've got a javascript snippet that displays a widget on my page. There's some links that get output by the script that look like this:
<a href="#" onclick="somefunction()">Link</a>
These links cause some JS to fire. That's great. The problem is the href="#"
and the absence of a "return false;"
at the end of the onclick
attribute.
When I click one of those links, the browser jumps to the top of the document. With the widget positioned close to the bottom of the document, this is no good.
Unfortunately, I have no control over the output of the script.
Using jQuery I can reference these links using $("#wxheader ul li a")
. I tried the following code but it doesn't work:
$(document).ready(function(){
$("#wxheader ul li a").each(function(){
var onclick = $(this).attr("onclick") + "; return false;";
$(this).attr("onclick", onclick );
});
});
I want to write a jQuery function that will change each onclick attribute to append "return false;"
and it has to run after the script has output the content to the page.
Any ideas?
You can easily change the onclick event of an element with jQuery without running the new function with: $("#id"). attr("onclick","new_function_name()"); By writing this line you actually change the onclick attribute of #id .
The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements). The change() method triggers the change event, or attaches a function to run when a change event occurs. Note: For select menus, the change event occurs when an option is selected.
In your code , onclick and onchange works independently.
Try this. The trick is to call preventDefault
in the handler, which prevents the default element action from propagating. I hope this helps.
$("#wxheader ul li a").click(function(e){
e.preventDefault();
return false;
});
Have you tried using href="javascript:"
?
I'd do it like this
$( '#wxheader ul li a' ).each( function( i, element )
{
// Capture the existing callback function
var originalCallback = element.onclick;
// Now, remove it from the elemnet
element.onclick = null;
// And replace it with our own, which calls the orignal
// with the proper context, and prevents the default
// event action
$(element).click( function( event )
{
event.preventDefault();
originalCallback.call( window );
});
});
You should be able to override it in jquery, try this:
$("#wxheader ul li a").each(function(){
$(this).click(function(e) {
e.preventDefault();
});
});
This stops the normal process of the click event.
Fixed, this will effectively stop the browser's default interpretation of the click event
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With