带有href和javascript的jQuery附加元素不起作用答案

【问题标题】：jQuery Appended elements with href and javascript doesn't work带有href和javascript的jQuery附加元素不起作用
【发布时间】：2013-09-04 17:28:07
【问题描述】：

所以我在 jQuery 中添加了一些元素，这些元素包含在单击锚点时调用另一个脚本的 href，但不起作用；这是一个例子：

$(".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>"));

    }

);

所以你可以看到锚点有一个 href 调用另一个脚本，这里是另一个脚本：

$(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.");
                 }

        });


        });
});

因此，脚本仅在元素位于 html 标记中时才有效，但如果元素附加了 jQuery，则该脚本无效。

有什么建议吗？

【问题讨论】：

标签： javascript jquery append href

【解决方案1】：

您正在动态地将 href 链接添加到 DOM 使用 .live()

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

//rest of your logic

});

【讨论】：

【解决方案2】：

以上两个答案都是正确的，但我也建议不要在锚点中使用href=\"javascript:;\"，而是在jQuery函数末尾添加return false;。

我使用此站点来了解 JavaScript http://www.javascripttoolbox.com/bestpractices/#onclick 的最佳实践（我将引导您阅读关于锚点的部分，但整个页面都值得一读）

【讨论】：

谢谢，我要改用 onclick。

【解决方案3】：

.live() 早已被弃用（在 1.9 中删除），我们可以停止推荐它吗？正确的做法是使用.on()，像这样：

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

jQuery documentation for .on()

另外，return false; 或 href=\"javascript:;\" 的建议都不一定是好的答案...如果您没有合适的 href 来替换（然后使用 event.preventDefault() 来防止发生默认行为），只需使用一个更合适的元素...

【讨论】：

【解决方案4】：

您可以使用$("span.vote_up").live() 代替$("span.vote_up").click。这会将代码绑定到所有 span.vote_up 元素，这些元素稍后可能会添加到 DOM 中。

我发现 this 链接很有帮助

【讨论】：

好的，现在似乎正在执行脚本（显示更改以检查它是否正常工作）但现在它没有做它应该做的事情，我要检查我是否错过了什么。