jQuery Appended elements with href and javascript

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?

Answer 1

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

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

//rest of your logic

});

Answer 2

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)

Answer 3

.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...

Answer 4

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