Как работать с динамически создаваемыми полями? - PullRequest
Новая
       9

Как работать с динамически создаваемыми полями?

7 голосов
/ 18 июля 2010

У меня есть веб-макет, который может содержать несколько ссылок на него. Эти ссылки создаются динамически с использованием функций AJAX. И все работает нормально.

Но я не знаю, как я могу работать с этими "динамически создаваемыми ссылками" (т.е. как вызывать какую-то функцию JS или jQuery, если я нажимаю на них). Я думаю, что браузер не может их распознать, так как они создаются после загрузки страницы.

Есть ли какая-нибудь функция, которая может "перерисовать" мою страницу и элементы на ней?

Tnx в сообщении о вашей помощи!

Ответы [ 7 ]

6 голосов
/ 18 июля 2010

Вы можете использовать 2 следующих метода, которые предоставляет 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
    });
}

Это был довольно длинный ответ, но я хотел бы объяснить теорию, лежащую в основе этого, ха-ха.

РЕДАКТИРОВАТЬ: Вы должны исправить свою разметку, она недопустима, потому что: 1) якоря не позволяют использовать атрибут значения, и 2) вы не можете иметь 2 или более тегов с одинаковым идентификатором.Попробуйте это: 

<a class="removeLineItem" id="delete-1">Delete</a> 
<a class="removeLineItem" id="delete-2">Delete</a> 
<a class="removeLineItem" id="delete-3">Delete</a>

И чтобы определить, какой из якорей был нажати в значении щелкнул номер, связанный с якорем.

3 голосов
/ 18 июля 2010

В коде инициализации вашей страницы вы можете настроить обработчики следующим образом: 

$(function() {
  $('#myForm input.needsHandler').live('click', function(ev) {
    // .. handle the click event
  });
});

Вам просто нужно иметь возможность идентифицировать элементы ввода по классу или чему-то еще.

0 голосов
/ 18 июля 2010

Все, что вам нужно сделать для работы с динамически создаваемыми элементами, это создать идентификаторы, с помощью которых вы можете их найти. Попробуйте следующий код в консоли 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 для отображения предупреждения (я не блокировал поведение по умолчанию, поэтому он заставит вас покинуть страницу. )

.jive jQuery позволит вам автоматически добавлять обработчики во вновь созданный элемент.

0 голосов
/ 18 июля 2010

рассмотрим HTML-форму 

<form>
  <input type="text" id="id" name="id"/>
  <input type="button" id="check" name="check value="check"/>
</form>

jquery script 

$('#check).click(function()  {
   if($('#id).val() == '') {
      alert('load the data!!!!);
   }
});

здесь при нажатии на кнопку скрипт проверяет, чтобы значение идентификатора текстового поля было нулевым. если его ноль, он возвратит предупреждающее сообщение .... я думаю, что это решение, которое вы ищете .....

хорошего дня ..

0 голосов
/ 18 июля 2010

Noramlly, браузер обрабатывает ответ HTML и добавляет его в дерево DOM, но иногда текущие определенные события просто не работают, просто повторно инициализируйте событие при вызове ajax-запроса

0 голосов
/ 18 июля 2010

Если ваши ссылки приходят через AJAX, вы можете установить атрибуты onclick на сервере.Просто выведите ссылки в AJAX следующим образом: 

<a href="#" onclick="callYourFunctionHere();return false;">Holy crap I'm a link</a>

return false гарантирует, что ссылка не перезагрузит страницу.

Надеюсь, это поможет!

0 голосов
/ 18 июля 2010

Как эти ссылки создаются динамически?Вы можете использовать правильный селектор , учитывая, что они используют одинаковое имя класса или находятся в одном теге и т. Д.

...