Question

这是非常明显的事情，但我无法看到它，尽管看到其他人面临的非常类似的问题并在stackoverflow中得到解决。我希望它跳出来对你。请帮我弄清楚为什么我无法插入（或insertAfter）现有元素。

我已将我的html视图文件（我正在使用codeigniter）与相关的javascript包含在内。

一如既往，非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Afterview</title>
    <script src="jquery-1.6.4.js" type="text/javascript" charset="utf-8"></script>  
    </head>
    <body>
        <div class="divm@n.com">
            <li>
                Click for more details.&nbsp;
                <a id="m@n.com" class="detailbtn" href="#detail-id">(Details)</a>
            </li>
       </div>
    </body>
</html>

<script type="text/javascript">
    var html_string;
    $('.detailbtn').each(function(i){
        $(this).click(function(){
            html_string='<li>hello</li>';
            $('.divm@n.com').insertAfter(html_string).show();
       });
    });

</script>

Answer 1

我认为您要更改代码以使用.after()并修改您的类名，如下所示：

$('.divmncom').after('<li>hello</li>').show();

将您的班级名称更改为<div class="divmncom">，以摆脱与您想要的不同解释的特殊字符。

而且，当你正在清理时，你应该摆脱html_string全局变量，通过完全删除它或将它变成局部变量。

作为解释，您似乎无法理解insertAfter()的工作原理。当你有：

$(x).insertAfter(y)

它在x表示的目标之后插入与选择器y匹配的每个元素。在您的代码中：

 html_string='<li>hello</li>';
 $('.divm@n.com').insertAfter(html_string).show();

html_string确实匹配任何现有的DOM元素，因此它没有地方可以插入。

此外，CSS选择器.divm@n.com'可能会遇到@字符问题，并会将.中的.com解释为第二类的开头，而不是你要。有可能有办法逃避这些特殊字符并仍然使用它们，但是完全停止使用它们并使你的类名成为不需要转义特殊字符的简单类名是更安全的代码。

您应该阅读两个相关jQuery方法.after()和.insertAfter()的页面，以确保将正确的参数应用于特定问题的正确方法。在我看来，您希望改为使用.after()。

Answer 2

我不理解代码，但您需要在选择器

中转义句点和@

$('.divm\\@n\\.com')

编辑

从它看起来你可以替换

$('.detailbtn').each(function(i){           
        $(this).click(function(){
            html_string='<li>hello</li>';
            $('.divm@n.com').insertAfter(html_string).show();
       });
    });

带

$(".detailbtn").click(function(e){
  e.preventDefault();
 $("<li>hello</li>").insertAfter(".divm\\@n\\.com");
});

DEMO

P.S。另请参阅@ jfriend00回答insertAfter如何运作

Answer 3

实际上你需要2个转义变量，一个用于@，另一个用于.。

根据我的理解，您似乎想在点击链接后添加一些HTML代码，如果是这样，我建议您使用append()（您也可以使用after()如果你想）

<强> HTML

<div class="divm@n.com">
<li>
    Click for more details.&nbsp;
    <a id="m@n.com" class="detailbtn" href="#detail-id">(Details)</a>
</li>

<强> JS

$('.detailbtn').click(function(){
    var html_string='<li>hello</li>';
    $('.divm\\@n\\.com').after(html_string);
});

Here是一个有效的解决方案......

Answer 4

类名“divm@n.com”无效，因为它包含一个'。'，这意味着该元素应该有一个类“divm @ n”和一个类“com”。要在此元素之后插入html_string中的值，您必须使用.after（）函数或将当前.insertAfter（）更改为：

$(html_string).insertAfter('.divm@ncom').show();

这就是我得到的：

var html_string;
$('.detailbtn').each(function(i){
    $(this).click(function(){
        html_string='<li>hello</li>';
        $('.divm@ncom').after(html_string).show();
   });
});

/ insertAfter之后的jquery - 无法插入新元素

4 个答案: