jquery click listener на удаленном файле JavaScript - PullRequest
Новая
       24

jquery click listener на удаленном файле JavaScript

2 голосов
/ 05 июня 2011

У меня есть простая ссылка: 

<a href="#" id="test">Test Link</a>

Я хочу получать оповещение при каждом нажатии этой ссылки, поэтому добавляю: 

<script>
$('#test').click(function() { alert('clicked!'); } );
</script>

и он работает нормально, но когда я перемещаю этот код в удаленный файл JavaScript, он не работает ..

есть идеи почему?

Я также пробовал этот код: 

$(document).ready(function() {
    $('#test').click(function() { alert('clicked!'); });
});

1 Ответ

2 голосов
/ 05 июня 2011

Ваш второй пример, использующий функцию ready, должен работать.Ваш первый пример также должен работать при условии, что вы включили скрипт ниже элемента с идентификатором «test» (элемент должен уже существовать, когда ваш скрипт выполняется, так как вы не ожидаете готовности DOM).В обоих случаях ваш скрипт должен быть включен ниже (после) скрипта jQuery.

Пример, когда вы не используете ready

Пример, когда вы делаете используете ready

Я бы проверил, что ваш внешний файл действительно загружается (ищите 404 ошибкив консоли браузера).

Обновление : из вашего комментария ниже, проблема в том, что элемент "test" не существует, когда вы пытаетесь подключитьобработчик.click устанавливает обработчик для элемента, только если он уже существует.Если вы создаете элемент позже, у вас есть три варианта (два из которых действительно одинаковы):

  1. Используйте уже имеющийся код, но запустите его после создания элемента (например, в обратном вызове success вызова ajax , который вы делаете).
  2. Используйте live, который в основном перехватывает документ события clickи проверяет, был ли выбран элемент, о котором вы говорите (в данном случае "#test").
  3. Используйте delegate в соответствующем контейнере (элемент внутрикоторый вы добавляете "тест").delegate является более целевой версией live.

live и delegate являются примерами техники, называемой делегированием события , которую jQuery упрощает дляпредоставив эти методы.

См. ссылки для получения дополнительной информации и примеров, но, например, предположим, что вы собираетесь добавить элемент «test» к элементу с идентификатором «target».Вы бы использовали delegate следующим образом: 

$("#target").delegate("#test", "click", function() {
    alert("Clicked");
});

Это перехватывает событие click на "цели", но действует так же, как вы его просто волшебным образом зацепили«тест», как только «тест» был добавлен.В вашем обработчике this относится к элементу «test» так же, как с click.

...