CODEWITHSUNDEEP
javascriptjqueryreplace
Anil Sharma
Anil Sharma

Reputation: 491

Replacing an element by using jQuery

I have html output in paging section like this;

<p>&nbsp;<strong class="active">1</strong>&nbsp;<a href="http://localhost/project/report_nc/search_now/1">2</a>&nbsp;<a href="http://localhost/project/report_nc/search_now/2">3</a>&nbsp;<a href="http://localhost/project/report_nc/search_now/1">Next »</a>&nbsp;</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. <a href="http://localhost/project/report_nc/search_now/2"></a>) and replace it by a new anchor tag (i.e. <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.

Upvotes: 1

Views: 252

Answers (4)

Andreas Wong
Andreas Wong

Reputation: 60516

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);
})

Upvotes: 4

Umesh Patil
Umesh Patil

Reputation: 10685

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>&nbsp;
    <strong class="active">1</strong>&
    nbsp;
    <a href="http://localhost/project/report_nc/search_now/1">2</a>&nbsp;
    <a href="http://localhost/project/report_nc/search_now/2">3</a>&nbsp;
    <a href="http://localhost/project/report_nc/search_now/1">Next »</a>&nbsp;
    </p>
    </body>
    </html>

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

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');

Upvotes: 0

Gagandeep Singh
Gagandeep Singh

Reputation: 5879

Try this in jquery

$('a').click(function(){
    myFunction($(this).text());
});

Upvotes: 1

Related Questions