新手 Jquery 问题 - 为什么这个简单的脚本不起作用？

Question

我正在学习JQuery，为我的主页编写了一个简单的AJAX外部脚本。当我悬停在链接上时，它会尝试从另一个HTML文件中加载一些静态标记并将其插入到我的主页中...

$(function()
{
    $('a#contact_link').hover(function() 
    {
        alert('test1'); 
        $('<div id="contact_container">').load('contact.htm #contact', function() 
        {
            alert('test2');
            /*$(this) + '</div>';
            $(this).hide()
                .insertAfter('#header')
                .slideDown(1000)  */  
        });

        return false;
    });
});

目前，我只是想让'test2'提示框出现，这就是为什么我将下面的代码注释掉的原因。目前，只有'test1'提示框出现了，意味着'test2'提示行永远不会被执行。你有什么想法吗？

下面是来自我的contact.htm文件的代码片段...

<div id="contact_container">
    <div id="contact">
        <p>
        <strong>NAME</strong>: My Name<br/>
        <strong>EMAIL</strong>: My Email<br/>
        <strong>SKYPE</strong>: My Skype Handle<br/>
        <strong>ADDRESS</strong>: My Address<br/>
        </p>        
    </div><!--end contact-->
</div><!--end contact_container-->

thanks so much in advance for your help!

- BeachRunnerFred

Answer 1

您在使用$.load时使用了不正确的选择器语法，选择器不是HTML字符串，它必须符合由jQuery选择器手册设置的语法规则。请参考jQuery选择器手册。

$('a#contact_link').hover(function() 
    {
        alert('test1'); 
        $('div#contact_container').load('contact.htm #contact', function() 
        {
            alert('test2');
            /*$(this) + '</div>';
            $(this).hide()
                .insertAfter('#header')
                .slideDown(1000)  */  
        });

        return false;
    });

- karim79

---

谢谢，但它似乎仍然无法工作。您有其他的想法吗？ - BeachRunnerFred

作为一条注意事项，最好将花括号放在与您的函数()相同的行上。原因是Javascript执行分号插入。参考：http://www.youtube.com/watch?v=hQVTIJBZook - Samantha Branham

我从来没有在将花括号放在下一行时遇到过问题。 - ChaosPandion

@ChaosPandion - 到目前为止，你一定非常幸运！将左大括号放在同一行上可以确保您永远不会遇到与分号插入有关的问题，这可能是非常棘手的错误。对于样式的小改变，这是值得的。 - Russ Cam

Answer 2

选择器可能是原因。

$(function()
{
    $('a#contact_link').hover(function() 
    {
        alert('test1'); 
        $('#contact_container').load('contact.htm', function() 
        {
            alert('test2');
            /*$(this) + '</div>';
            $(this).hide()
                .insertAfter('#header')
                .slideDown(1000)  */  
        });

        return false;
    });
});

- ChaosPandion

---

非常感谢，但似乎这也没有起作用。不确定出了什么问题... - BeachRunnerFred

Answer 3

我认为你的 #contact_container 选择器不太对。在 JQuery 网站上查看选择器文档 (http://docs.jquery.com/Selectors)。我认为这样可能会更好一些：

$(function()
{
$('a#contact_link').hover(function() 
{
    alert('test1'); 
    $('#contact_container').load('contact.htm #contact', function() 
    {
        alert('test2');
        /*$(this) + '</div>';
        $(this).hide()
            .insertAfter('#header')
            .slideDown(1000)  */  
    });

    return false;
});
});

- Sven Schott