0

我要感谢这篇文章在此处输入链接描述它实际上是有效的，但只有在直接编写 html 文档时才有效。但是在 jquery 创建的文档中应用相同的东西时它不起作用。你能告诉我如何解决这个问题吗？

我的代码是

<script>
var toggle = false;
$(function() {
    $('a.comments').click(function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
}); 

var html;
$(document).ready(function()
{
html='<a href="#" class="comments">Show Comments</a><br /><div class="toggleComments">This is #comment1 <br />This is #comment2 <br /></div>';

$("#start").append(html);

}); 
</script>

</head>

<body>
<div id="start"></div>
</body>
</html>
4

3 回答 3

1

问题是您试图在元素存在之前将其绑定到元素。只需稍微重新排列代码，以便在将单击事件绑定到它时元素存在。您可以在这个jsFiddle 页面上看到它。您可能需要重新考虑一下您的逻辑，因为文本并不完全具有您所期望的行为。

var html;
$(document).ready(function() {
    html = '<a href="#" class="comments">Show Comments</a><br /><div class="toggleComments">This is #comment1 <br />This is #comment2 <br /></div>';

    $("#start").append(html);
    var toggle = false;
    $('a.comments').click(function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000, function() {
            if (toggle) {
                $this.text('Hide Comments');
            } else {
                $this.text('Show Comments');
            }
            toggle = !toggle;
        });
        e.preventDefault();
    });
});

您还可以使用该on函数自动绑定到动态添加的元素。您所要做的就是更改$("a.comments").click(function() {})为$(document).on('click', 'a.comments', function() {}).

于 2012-07-14T13:50:17.590 回答
0

要将您的事件处理程序应用于动态创建的元素，您需要on函数：

 $(document).on('click', 'a.comments', function(e) {

即使在将来添加到 DOM 的元素上，也将在单击时调用提供的函数。

于 2012-07-14T13:47:11.120 回答
0

使用 .live 来解决这个问题

$('a.comments').live('click',function(){
 //do your job here
});
于 2012-07-14T13:47:19.997 回答