Простой HTML DOM Click Issue

0

У меня есть сайт с страницей index.php с AJAX Live Search, который соединяется с базой данных и возвращает результаты. Один из результатов тезисов:

<div id="searchlinktovideo">Video</div>

У меня также есть код на странице index.php, чтобы попытаться сделать что-то с приведенным выше кодом, в этом случае для анимации на странице, когда пользователь нажмет на него:

$(document).ready(function () {
$("#searchlinktovideo").click(function () {
    $("#searchpage").animate({
        'left': '-486px'
    }, 200, function () {
        $("#homepage").animate({
            'left': '-486px'
        }, 200, function () {
            $("#videopage").animate({
                'left': '0px'
            }, 200);
        });
    });
});
});

Он не работает, я думаю, что это может быть связано с Html DOM, но я не знаю, с чего начать, чтобы начать решать проблему.

На данный момент вы можете найти код по адресу http://www.squbo.com (нажмите "Поиск" и введите "Видео" - РЕЗУЛЬТАТ РЕЗУЛЬТАТОВ, КАК HTML, НО ЗДОРОВЬЕ НЕ РАБОТАЕТ НА ЭТО))

  • 0
    Есть ли ошибки в консоли ошибок браузера или консоли отладки? И, пожалуйста, разместите соответствующий HTML в вашем вопросе.
Теги:
dom

2 ответа

1
Лучший ответ

Если <div id="searchlinktovideo">Video</div> добавляется динамически (что похоже на то, что оно есть), то, вероятно, ваша проблема заключается в том, что вы пытаетесь установить обработчик событий до того, как элемент действительно находится на странице. Это ничего не делает, потому что элемент не может быть найден, поэтому никакой обработчик событий не установлен.

Есть несколько возможных решений.

  1. Вы можете использовать делегированную обработку событий, которая работает с динамически добавленными элементами.
  2. Вы можете установить обработчик событий после добавления элемента на страницу.

Для делегированной обработки событий вы должны использовать следующее:

$(document).on("click", "#searchlinktovideo", function () {...});

В идеале вместо $(document) вы должны использовать селектор для статического родителя (родительский div, который не добавляется динамически) ближе к #searchlinktovideo.

Поделиться
  • 1
    Тем не менее, делегированный клик снова! ;)
0

Вы видите, что jquery ищет searchlinktovideo как только страница готова, но запрос ajax завершается после того, как страница готова, поэтому, когда она ищет, она ничего не находит. Вы должны использовать

$( document ).ajaxComplete(function() {
 $("#searchlinktovideo").click(function () {
 ..
 ..
 ..
 });

});
Поделиться
  • 0
    Какое это имеет отношение к решению проблемы ОП?
  • 0
    просто вызов функции после выполнения ajax решит эту проблему. Поэтому, когда Ajax завершен, это будет называться. Таким образом, будет элемент searchlintovideo для ссылки на.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню