Как работать с динамично созданными полями?
У меня есть веб-расположение, которое может содержать несколько ссылок на него. Те ссылки динамично создаются, с помощью функций Ajax. И это работает хорошо.
Но, я не знаю, как я могу работать с теми "динамично созданными ссылками" (т.е. как назвать некоторый JS или функцию jQuery, если я нажимаю на них). Я предполагаю, что браузер не может распознать их, так как там создаются после того, как страница загружается.
Есть ли некоторая функция, которая может "повторно представить" мою страницу и элементы на ней?
Tnx в рекламе на Вашей справке!
7 ответов
Вы можете использовать два следующих метода, которые предоставляет jQuery:
Первый - это метод .live(), а второй - .delegate().
Использование первого метода очень простое:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
Как вы можете видеть, первый аргумент - это событие, которое вы хотите связать, а второй - функция, которая обрабатывает событие. То, как это работает, не совсем похоже на "повторный рендеринг". Обычный способ сделать это ( $("#dynamicElement").click(...) или $("#dynamicElement").bind("click", ...) ) работает путем присоединения обработчика определяемого события к DOM-элементу, когда DOM правильно загружен ($(document).ready(...) ). Теперь, очевидно, это не будет работать с динамически создаваемыми элементами, потому что они не присутствуют при первой загрузке DOM.
Способ работы .live() заключается в том, что вместо того, чтобы прикреплять обработчик события к самому элементу DOM, он прикрепляет его к элементу document, используя свойство всплывания JS и DOM (когда вы нажимаете на динамически созданный элемент, а обработчик события не прикреплен, он продолжает искать его наверху, пока не найдет).
Звучит довольно изящно, верно? Но есть небольшая техническая проблема с этим методом, как я уже сказал, он прикрепляет обработчик события к вершине DOM, поэтому, когда вы щелкаете элемент, браузеру приходится перемещаться по всему дереву DOM, пока он не найдет нужный обработчик события. Процесс, кстати, очень неэффективный. И вот здесь-то и появляется метод .delegate().
Предположим следующую структуру HTML:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
Итак, с помощью метода .delegate() вместо того, чтобы привязывать обработчик события к вершине DOM, вы просто можете прикрепить его к родительскому DOM-элементу. DOM-элементу, который, вы уверены, будет находиться где-то вверху динамически генерируемого содержимого в DOM-дереве. Чем ближе к ним, тем лучше это будет работать. Итак, это должно сделать волшебство:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
Это был длинный ответ, но мне нравится объяснять теорию, стоящую за этим, хаха.
EDIT: Вы должны исправить свою разметку, она недействительна, потому что: 1) якоря не позволяют использовать атрибут value, и 2) вы не можете иметь 2 или более тегов с одинаковым ID. Попробуйте сделать так:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
И определить, какой из якорей был нажат
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
С помощью этого кода вы сохраните в переменной anchorClicked идентификатор ссылки, на которую нажимали, а в valueClicked - число, связанное с якорем.
Как эти ссылки создаются динамически? Вы можете использовать правильный селектор , учитывая, что они используют одно и то же имя класса или находятся в одном теге и т. Д.
В коде инициализации страницы вы можете настроить такие обработчики:
$(function() {
$('#myForm input.needsHandler').live('click', function(ev) {
// .. handle the click event
});
});
Вам просто нужно иметь возможность идентифицировать входные элементы по классам или чему-то еще.
рассмотрите HTML-форму
<form>
<input type="text" id="id" name="id"/>
<input type="button" id="check" name="check value="check"/>
</form>
jquery скрипт
$('#check).click(function() {
if($('#id).val() == '') {
alert('load the data!!!!);
}
});
здесь при нажатии на кнопку скрипт проверяет значение идентификатора текстового поля как null. если его значение равно нулю, он вернет предупреждающее сообщение .... я думаю, это решение, которое вы ищете .....
хорошего дня ..
Норамли, браузер обрабатывает ответ HTML и добавляет его в дерево DOM, но иногда текущие определенные события просто не работают, просто повторно инициализируйте событие, когда вы вызываете запрос ajax ..
Все, что вам нужно сделать для работы с динамически создаваемыми элементами, - это создать идентификаторы, по которым вы сможете их найти. Попробуйте следующий код в консоли Firebug или в инструментах разработчика для Chrome или IE.
$(".everyonelovesstackoverflow").html('<a id="l1" href="http://www.google.com">google</a> <a id="l2" href="http://www.yahoo.com">yahoo</a>');
$("#l1").click(function(){alert("google");});
$("#l2").click(function(){alert("yahoo");});
Теперь у вас должно быть две ссылки, где объявление обычно создается динамически, а затем добавлен обработчик onclick для вывода оповещения (я не блокировал поведение по умолчанию, поэтому он заставит вас покинуть страницу. )
.live jQuery позволит вам автоматически добавлять обработчики к вновь созданному элементу.
Если ваши ссылки поступают через AJAX, вы можете установить атрибуты onclick на сервере. Просто выведите ссылки в AJAX следующим образом:
<a href="#" onclick="callYourFunctionHere();return false;">Holy crap I'm a link</a>
return false гарантирует, что ссылка не перезагрузит страницу.
Надеюсь, это поможет!