Вопрос Noobie 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-->

Заранее большое спасибо за помощь!

Answer 1

Вы вызывали $ .load, используя неверный синтаксис селектора, селектор не является строкой HTML, он должен соответствовать правилам синтаксиса, установленным в руководстве по селекторам 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;
    });

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

Answer 3

Я считаю, что ваш селектор #contact_container не совсем кошерный. Посмотрите селекторную документацию (http://docs.jquery.com/Selectors) на сайте JQuery. Я думаю, что-то вроде этого может быть немного лучше:

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