-1

这是非常明显的事情，但是尽管查看了其他人在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>
4

4 回答 4

1

实际上，您需要 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);
});

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

于 2012-05-22T19:06:42.233 回答
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'有问题，并将in解释为第二个类的开始，这不是您想要的。可能有一些方法可以转义这些特殊字符并仍然使用它们，但是完全停止使用它们并使您的类名成为不需要特殊字符转义的简单类名会更安全。@..com

您可能应该阅读两个相关 jQuery 方法的页面，.after()并.insertAfter()确保针对您的特定问题将正确的参数应用于正确的方法。在我看来，您想.after()改用它。

于 2012-05-22T18:52:38.220 回答
1

我不理解代码，但您需要转义句点并@在选择器中

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

演示

PS 还可以查看@jfriend00 的回答了解如何insertAfter工作

于 2012-05-22T18:53:14.220 回答
0

The class-name "divm@n.com" is invalid, because it contains an '.', which means, that the element should have a class "divm@n" and a class "com". And to insert the value from html_string after this element, you have to use the .after() function or change your current .insertAfter() to this:

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

This is, what i got:

var html_string;
$('.detailbtn').each(function(i){
    $(this).click(function(){
        html_string='<li>hello</li>';
        $('.divm@ncom').after(html_string).show();
   });
});​
于 2012-05-22T18:56:11.020 回答