Noobie Jquery Вопрос - Я обнаружил ошибку в моем скрипте, не знаю, как ее исправить

Question

Спасибо за вашу помощь по моему последнему noobie jquery вопросу , и, поскольку вы хорошо поработали, у меня есть для вас другой :) Сценарий ниже позволяет мне выполнить простой AJAX, извлекая некоторую статическую разметку из другого HTML файл и вставьте его на мою домашнюю страницу. У меня ошибка, связанная с магией асинхронности, но, поскольку я новичок в AJAX, я не уверен.

Когда я наводю указатель мыши на ссылку, она извлекает HTML-код и вставляет его на мою домашнюю страницу. Когда я убираю мышку со ссылки, она должна удалить новый HTML, который был вставлен. Ошибка проявляется, когда иногда вставляется HTML, но не удаляется, когда вы очень быстро перемещаете / выключаете указатель мыши. Моя теория заключается в том, что функция «мыши выключена» вызывается до того, как HTML-код вставлен, вы согласны? Если так, есть какие-нибудь мысли о том, как это исправить? Вот сценарий ...

$(function()
{
    //HOVER EFFECT FOR CONTACT LINK
    $('a#contact_link').hover(function() 
    {        
        $('<div id="contact_container" />').load('contact.htm #contact', function() 
        {
            $(this).stop()
                .hide()
                .insertAfter('#header')
                .slideDown(250);    
        });      
    }, 
    //MOUSE OFF EFFECT FOR CONTACT LINK
    function()
    {
        $('#contact_container').remove();       
    });    
});

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

РЕДАКТИРОВАТЬ * Благодаря вашим ответам я изменил свой сценарий, и ошибка, кажется, исправлена ​​...

$(function()
{
    //RETRIEVE THE MARKUP AT PAGE LOAD
    $('<div id="contact_container" />').load('contact.htm #contact', function() 
    {
        $(this).hide()
            .insertAfter('#header');
    });

    //HOVER EFFECT FOR CONTACT LINK, SHOW THE MARKUP
    $('a#contact_link').hover(function() 
    {        
        $('#contact_container').stop()
            .slideDown(250);             
    }, 
    //MOUSE OFF EFFECT FOR CONTACT LINK, HIDE THE MARKUP
    function()
    {
        $('#contact_container').stop()
            .hide();        
    });    
});

Я все еще вижу потенциал для нескольких ошибок в этом скрипте, но я сохраню это для другого вопроса;) спасибо всем!

Answer 1

Звучит правильно.

Возможный способ обойти это - установить флаг, когда вызов ajax успешен, чтобы указать, что контент был вставлен. Затем в функции hover out убедитесь, что флаг установлен, и, если он установлен, вызовите команду удаления. Вы можете установить интервал для проверки флага, пока он не будет установлен.

Или другим способом -

Выполните загрузку в готовом документе, скройте содержимое, затем отобразите и скройте при наведении курсора соответственно.

Кстати, ваш селектор будет вставлять новый элемент <div> с идентификатором contact_container, это то, что вы хотите?

Answer 2

Почему бы вам не заполнить контент только один раз и скрыть div, когда мышь отсутствует. Когда снова вызывается hover, если div присутствует в DOM, просто измените видимость div.

Каждый раз загрузка div с ответом Ajax не будет хорошей идеей, если получающийся ответ будет одинаковым.

if ($("#contact_container").length > 0){
    // the element exits in the DOM
}

Answer 3

Почему вы не используете мышеловку?

        $("a#contact_link").mouseleave(function(event){
            $("a#contact_link").hide("slow");
        });

Answer 4

Я думал, что кто-то уже ответил в вашем предыдущем вопросе , что ваш селектор DIV неверен. Вы пытались это исправить?