I have html output in paging section like this;
<p> <strong class="active">1</strong> 2 3 Next » </p>
Now i need to add attribute "onclick" using jquery. BUt unfortunately "onclick" attribute cannot be set with jquery. At the same time i came up with an idea : taking a single anchor tag (i.e. ) and replace it by a new anchor tag (i.e. ).
How would i do it with jquery? The idea is to post the form while clicking on the paging links.
SOLVED !
Thank you all for your kind responses......I guess there was a minor mistake in my code; as i was looking through the code posted by umesh i noticed "onClick"...yes i was using "onclick" instead of "onClick". Now it has worked in FF and hopefully it will work in IE too.
you can use .replaceWith() like so:
$('a').replaceWith('<a href="javascript:void(0)" onclick="myFunction(2)" />');
Although I'd recommend looking into why it is that makes you can't set onclick attribute using jquery, if you would like to bind a click event, you can use .click()
$('a').click(function(e) {
myFunction(2);
})
Try this in jquery
$('a').click(function(){
myFunction($(this).text());
});
Value of the anchor can be used to pass the value to function myFunction. If Anchor doesn't contain any value, don't do anything.
Working Test code as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Use Proper anchor selector on your page
$("a").each(function(){
var no=$(this).html();
if(!isNaN(parseInt(no))){
$(this).attr("onClick","myFunction("+no+")");
$(this).attr("href","javascript:void(0)");
}
});
});
</script>
</head>
<body>
<p>
<strong class="active">1</strong>&
nbsp;
2
3
Next »
</p>
</body>
</html>
Well making the assumption that you would prefer to use a click handler rather than replace your entire anchor tag, take a look at this. The only thing you need to do is return false in the click event so that the default navigation doesn't occur.
http://jsfiddle.net/2GgK3/
//if any link is clicked
$('a').click( function() {
var clickedLink = $(this).prop('href'); //get its href
console.log(clickedLink); //output to console
return false; //prevent default navigation
});
You also CAN set attributes directly in jQuery. In jQuery 1.7+ use prop. Otherwise use attr.
$('element').prop('href', 'new href value');
Related
I have a text bounded by anchor tag. As soon as the user click it, it should toggle between two texts.
I have knowledge on how to toggle a button in JQuery, but don't know how do I implement it with link.
<h1>Questions and Answers</h1>
<p>First Question: What is the capital of Germany?
<br>
<i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i>
</p>
<p>Answer: Berlin.</p>
<script>
$(document).ready(function() {
$("toggle_this").click(function() {
$(this).hide();
});
});
</script>
First change id to class="toggle_this". Then use selector .toggle_this.
Then you can use e.preventDefault() to stop the default action if the link.
Then using closest() and next() you can get the answer <p> then toggle() it.
$(".toggle_this").click(function (e) {
e.preventDefault();
$(this).closest('p').next().toggle();
});
you could do this using jQuery (you can also use plain ol' JS, but it looks like you're using jQuery from before), using the .on method.
Although, I would first recommend you adding a class/id to the answer, so it's a bit cleaner:
$(document).ready(function () {
$('#toggle_this').on('click', function (event) {
event.preventDefault();
$('#answer').toggle();
});
});
EDIT: event.preventDefault() prevents the anchor tag from navigating to the href, and .on registers an event handler, so that the function specified is executed when the event triggers.
First you have a stray closing anchor </a> tag before the 'Here'.
Also i'd give the <p> your trying to hide an id eg. <p id="answer">.
Update the jQuery to this.
$(document).ready(function() {
$("#answer").hide();
$("#toggle_this").click(function() {
$("#answer").toggle();
});
});
How could one trigger the default action/event of a HTML link (anchor element)? That is to use JavaScript/jQuery to "click" an existing HTML link, as if the user has clicked it.
Just using .click() does not seem to work.
$('#alink').click();
// the nothing happening
For this HTML:
<a id="alink" href="http://google.com" target="_blank">a link</a>
Example fiddle: http://jsfiddle.net/dCfD8/
I'd rather not create a new window in JavaScript (and take care of whatever else needs to be handled when a link is clicked).
You can trigger the click event using a simple trigger method in jQuery.
$('#alink').trigger('click');
Beware though, that even in the event gets fired, the browser will not follow the link href. The only way to follow the href is to actually click it with the mouse yourself.
As far as I know, there is no way to force a link to behave as if it were clicked. You have to change the document location or something like that to actually navigate between pages.
Expanding on Fabio Cicerchia's comment to his own post: You can use window.open:
var link = $('#alink');
var target = link.attr("target");
window.open(link.attr("href"), target ? target : "_self");
<script src='jquery lib source' ></script>
<script>
function force()
{ ...do something...to fill page2
$('#gopage2').trigger('submit');
}
</script>
<form action='#page2' id='gopage2'>
</form>
...
<span name='#page2'>This is page2</span>
try this:
$('#alink').trigger('click');
I have a link
<a id="special_link" href="" onclick="" >Link</a>
Is it possible to use Jquery in the onclick part and apply something to the current element?
Something similar with :
$("#special_link").html('test');
Update :
I want to change the content after click
I would prefer using $this so I don't depend on the id
Yes, it's possible:
<a href='whatever' onclick='$("#special_link").html("test");'>blah</a>
It's rarely necessary, though. Usually you can hook these things up later, using a selector that finds the a element and uses bind or click to hook up a handler, e.g.:
jQuery(function($) { // Function gets run at DOM load time
$("some_CSS_selector_that_finds_the_a_element").click(function() {
$("#special_link").html("test");
return false; // Do this only if you don't want the link followed (which I'm guessing you don't)
});
});
If special_link is the id of the link you want to do this on (I wasn't sure, from your question), you can simplify that:
jQuery(function($) { // Function gets run at DOM load time
$("#special_link").click(function() {
$(this).html("test");
return false; // Do this only if you don't want the link followed (which I'm guessing you don't)
});
});
More:
bind
click
$
The code you provided will work as-is in the onclick attribute, like T.J. Crowder pointed out. Is your problem using jQuery for the current element? like this:
<a href='#' onclick='$(this).html("a test link");'>a link</a>
You can refer to the current element as this.
Example:
<script ...>
$("#special_link").click(function() {
console.log(this) // You'll see the HTML element, not wrapped by jQuery
$(this).html("Bar");
})
</script>
Foo
Please, don't use onclick, rely on bind that's more generic and unobstructive.
Good luck!
If you want it inline, and it's as simple as changing the HTML, I probably wouldn't use jQuery for it.
<a id="special_link" href="#" onclick='this.innerHTML="some new value";'>click me</a>
Example: http://jsfiddle.net/8ucGB/2/
i got this url
<a class="remove_item' rel="4" onclick="javascript:jQuery(#blablabla)" href="javascript:;' >remove</a>
i'm using this simple find and replace
item.find('a.remove_class').attr({
title:'hello',
click:'hello();'
} );
but it seem it's not working. i still not able to replace javascript:jQuery(#blablabla) with another function.
To set onClick you should use something like this $("a").attr("onclick", js);
where js is a string containing your javascript code.
Try attaching the event handler using the below code snippet in your page body:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.remove_item').click(hello);
});
</script>
jQuery has no built-in way to assign event handlers in that way. Use the DOM0 method to set the onclick handler instead:
item.find('a.remove_class').each(function() {
this.onclick = function() {
alert("Clicked!");
};
});
Also, don't put javascript: in you event handler attributes. It's incorrect and only works by coincidence.
Why not just do this.
<script type="text/javascript">
$(document).ready(function() {
$("a.remove_item").click(function() {
alert("You have clicked my <a>!!");
//do other stuff
});
});
</script>
The attr doesn't recognises the onclick attribute, get the html element (.get(0)) and use "raw" functions to extract the onclick attribute.
On Firefox the following works:
$("element").get(0).getAttribute("onclick")
You can remove by using
$("element").get(0).removeAttribute("onclick")
or setting a empty string
$("element").get(0).setAttribute("onclick", "")
Can anyone help, seem to have an issue placing a onclick event of an anchor tag, it works on an image.. I have this
this.whereAreWe = document.getElementById('where_are_we');
this.whereAreWe.onclick = this.whereAreWe;
I have placed a A tag using the id of "where_are_we" ...
but it never executes.. if I change it to an image it works..
I also put the href="#"
Is there something special about anchor tags and applying the onclick via code?
I also tried removing the href, If I remove the href it doesn't show me the little hand icon.
I have put a breakpoint in the function and with an image it enters but using the anchor it doesn't
Any ideas?
The code you provided is confusing. The following code works correctly for me:
a link
<script type="text/javascript">
var whereWeAre = document.getElementById("whereWeAre");
function testClick() {
alert("You clicked!");
}
whereWeAre.onclick = testClick;
</script>
If your example was a little more specific we could probably be more helpful.
The are 2 problems with your javascript. The use of the "this" and the binding of the onclick event back to the reference of the DOM element for the HREF. Try this instead:
var whereAreWe = document.getElementById("where_are_we");
whereAreWe.onclick = function(){
alert("Click event on Where are We");
return false;
};
I also tried removing the href, If i remove the href it doesn't show me the little hand icon.
You need the 'href' attribute for the 'a' tag in order to specify the URL of the destination document or web resource. In case you do not specify it - mouseover doesn't change the cursor. Of course you could use CSS to modify that but that is a different question.