jQuery Appended elements with href and javascript doesn't work

Question

So I'm appending some elements with jQuery that contain href that calls another script when the anchor is clicked, but doesn't work; here's an example:

$(".un_comentario").hover(

    function () {

        $("#dedos_voto", this).append($("<span id=\"commentup\" class=\"vote_up\"><a href=\"javascript:;\" ><img src=\"/mimg/comment/csthumbup.png\" /></a><?php echo $utilchido;?></span>"));

    }

);

So as you can see the anchor has an href that calls another script, here's the other script:

$(function(){

    $("span.vote_up").click(function(){
    //get the id
    the_id = $("div.un_comentario").attr('id');

        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$("div.un_comentario").attr("id"),
            url: "votacomment.php",
            success: function(){alert("Gracias, el voto se ha agregado.");
                 }

        });


        });
});

So the script only works if the elements are in the html markup, but not if the elements are appended with jQuery.

Any suggestion?

Rafay · Accepted Answer · 2011-02-12 07:31:45Z

2

you are dynamically adding the href links to the DOM use .live()

$("span.vote_up").live('click',function(){

//rest of your logic

});

answered Feb 12, 2011 at 7:31

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Jackman · Accepted Answer · 2011-02-12 07:47:04Z

1

The two above answers are correct, but I also recommend don't use href=\"javascript:;\" in the anchor, instead add a return false; at the end of the jQuery function.

I use this site for best practices with JavaScript http://www.javascripttoolbox.com/bestpractices/#onclick (I am directing you to the part about anchors but the whole page is worth a read)

answered Feb 12, 2011 at 7:47

Andrew Jackman

14k8 gold badges38 silver badges44 bronze badges

1 Comment

Danny Over a year ago

Thanks, I'm gonna use the onclick instead.

user2722002 · Accepted Answer · 2013-09-04 09:28:07Z

1

.live() is long since deprecated (removed in 1.9), can we stop recommending it? The right approach is to use .on(), like this:

$("#span.vote_up").on("click", function(event){
    //do this
});

jQuery documentation for .on()

Also, neither the return false; or the suggestion of href=\"javascript:;\" are necessarily good answers... If you don't have an appropriate href to replace (then use event.preventDefault() to prevent default behaviour occuring), just use a more appropriate element...

answered Sep 4, 2013 at 9:28

user2722002

652 silver badges6 bronze badges

Comments

naiquevin · Accepted Answer · 2011-02-12 07:34:04Z

0

You can use $("span.vote_up").live() instead of $("span.vote_up").click. This will bind the code to all span.vote_up elements which might get added to the DOM later.

I found this link helpful

answered Feb 12, 2011 at 7:34

naiquevin

7,81613 gold badges56 silver badges64 bronze badges

1 Comment

Danny Over a year ago

Ok that seems to execute the script now (showing an alter to check it's working) but now it's not doing what it's supposed to do, I'm gonna check if I missed something.

Collectives™ on Stack Overflow

jQuery Appended elements with href and javascript doesn't work

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related