Question

我想创建类似wordpress评论回复表单的东西。在WP中，当你点击答复按钮下的apear回复按钮a时。我点击回复按钮后附加表格，但我的问题是如果我再次点击另一个表格附加到容器。对于handeling这个我想在追加表单之前搜索容器，如果表单存在它sholudn附加另一个但是看起来搜索不会对附加的html起作用。你对这个问题的建议是什么？

$(document).on('click','.reply-btn',function(){
 ...

            var form="<div class='col-xs-12' >"+
                  "<form role='form' method='post'>"+
                    ....
                  "</form>"+
             "</div>";

            var container=$(this).closest('div');

            if(container.html().search(form)<0){
                container.append(form)
            }else{
                alert('it'e also appended') 
            }

        })// .reply-btn

Answer 1

 $(document).on('click','.reply-btn',function(){
            var form="<div class='col-xs-12' >"+
                  "<form role='form' method='post'>"+
                    ....
                  "</form>"+
             "</div>";

            var container=$(this).closest('div');


            if(container.find('form').length <1)
                container.append(form)
            }else{
                alert('it is also appended') 
            }

        });

Answer 2

你的html字符串和dom结构返回的html可能不一样，你应该做的是检查容器是否有像

这样的表单

$(document).on('click', '.reply-btn', function () {


    var container = $(this).closest('div');

    if (container.find('form').length == 0) {
        var form = "<div class='col-xs-12' >" +
            "<form role='form' method='post'>" + ....
            "</form>" +
            "</div>";
        container.append(form)
    } else {
        alert('it\' e also appended ')
    }

})

Answer 3

使用find和长度来检查元素是否存在

   if(container.find("form").length){
     // already there
}

如何在jquery中搜索附加的html？

3 个答案: