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?

Answer 1

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

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

//rest of your logic

});