Replacing an element by using jQuery
Question
I have html output in paging section like this;
<p> <strong class="active">1</strong> <a href="http://localhost/project/report_nc/search_now/1">2</a> <a href="http://localhost/project/report_nc/search_now/2">3</a> <a href="http://localhost/project/report_nc/search_now/1">Next »</a> </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 (ie <a href="http://localhost/project/report_nc/search_now/2"></a> ) and replace it by a new anchor tag (ie <a href="javascript:void(0)" onclick="myFunction(2)"></a> ).
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.
4 answers
solution1
4 2012-01-17 06:05:21
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);
})
solution2
1 2012-01-17 06:08:52
Try this in jquery
$('a').click(function(){
myFunction($(this).text());
});
solution3
0 2012-01-17 06:09:22
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.
//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');
solution4
0 ACCPTED 2012-01-17 06:17:34
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;
<a href="http://localhost/project/report_nc/search_now/1">2</a>
<a href="http://localhost/project/report_nc/search_now/2">3</a>
<a href="http://localhost/project/report_nc/search_now/1">Next »</a>
</p>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.