如何在使用DOM操作时使用jquery显示/隐藏注释_Jquery

如何在使用DOM操作时使用jquery显示/隐藏注释

jquery

如何在使用DOM操作时使用jquery显示/隐藏注释,jquery,Jquery,我想感谢这篇文章，它实际上是工作，但只有当html文档直接编写。但在jquery创建的文档中应用相同的内容时，它不起作用。你能告诉我怎么解决这个问题吗我的代码是 <script> var toggle = false; $(function() { $('a.comments').click(function(e) { var $this = $(this); $('.toggleComments').toggle(1000,functio

我想感谢这篇文章，它实际上是工作，但只有当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>


var-toggle=false；
$（函数（）{
$（'a.comments'）。单击（函数（e）{
var$this=$（this）；
$（'.toggleComments'）.toggle（1000，函数（）{
如果（！切换）{
$this.text（'Hide Comments'）；
切换=！切换；
}否则{
$this.text（'Show Comments'）；
切换=！切换；
}
});
e、 预防默认值（）；
});
}); 
var-html；
$（文档）.ready（函数（）
{
html='
这是#评论1
这是#评论2
；
$（“#开始”）.append（html）；
});

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

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

提供的函数将在将来添加到DOM中的元素上被调用

使用。活着解决这个问题

$('a.comments').live('click',function(){
 //do your job here
});

问题是您试图在事件存在之前将其绑定到元素。只需稍微重新排列代码，使元素在绑定click事件时存在。你可以看到它在做这个。你可能想重新思考一下你的逻辑，因为文本没有你期望的行为

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

var-html；
$（文档）.ready（函数（）{
html='
这是#评论1
这是#评论2
；
$（“#开始”）.append（html）；
var-toggle=false；
$（'a.comments'）。单击（函数（e）{
var$this=$（this）；
$（'.toggleComments'）.toggle（1000，函数（）{
如果（切换）{
$this.text（'Hide Comments'）；
}否则{
$this.text（'Show Comments'）；
}
切换=！切换；
});
e、 预防默认值（）；
});
});

您还可以使用

on

功能自动绑定到动态添加的元素。您所要做的就是将

$（“a.comments”）。单击（function（）{}）将$（document）。在（'click'，'a.comments'，function（）{}）
上，如果您没有使用jQuery1.7，您可以使用它。但是，是的，dystroy建议的是目前为止首选的方法阅读我给出的链接。“旧版本jQuery的用户应该优先使用.delegate（），而不是.live（）。”感谢Alice和dystroy，这对我来说是新的。嗨，dystroy，这对我很有用。谢谢你的帮助。嗨，dystroy，如果我有10个评论组，你知道如何做这类事情吗？在没有10个Jquery脚本的情况下，你可以独立进行显示/隐藏。当然，没有10个脚本，你也可以这样做，但我不清楚你的问题。什么是“评论组”？是什么阻止您在回调函数中使用$（this）
？