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

Я использую функцию для добавления изображений на сайт. Они входят в DIV, используя .html() . После этого мне нужны эти же изображения, чтобы показать эффект при наведении курсора, но ничего не происходит, когда я нахожу их. Если я набираю тот же код, который я использую в функции .html(), тот же класс и т. Д., Зависание работает.Как я могу повторно использовать динамические теги JQuery?

После многих попыток я сузил свою проблему до этого образца. Оказывается, проблема заключается в том, как контейнер DIV предоставляет код, добавленный через .html() ... и мои функции зависания не могут найти динамически добавленные теги.

Вот мой пример код:

<html> 
<head> 
<title>Problems</title> 
<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
<p id="TXToldone">This line was already here</p> 
<div id="DIVnewone"></div> 
<script> 

function createnewone(){ 
    $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>"; 
    $("#DIVnewone").html($txthtml); 
}; 
$(document).ready(function() { 
    createnewone(); 
}); 
$("*").on("click", function(){ 
    alert($(this).attr("id")); 
}); 

</script> 
</body> 
</html>

Примечание: - Это просто сырой пример моей реальной проблемы. Это не то, что я на самом деле пытаюсь выполнить, но решение этого сделало бы меня решить реальный;)
- Первые две функции взяты из фактического кода ... после того, как документ готов Я загружаю pics и рекурсивно добавить html, необходимый для каждый DIV ...
- Третья функция - это просто, чтобы вы, ребята, могли увидеть мою проблему ... Должно быть показывать предупреждение с идентификатором элемента, на который вы нажимаете (и его делает для 1-го абзаца) ... но проверьте, что произойдет, когда вы нажмете второй ... вы не видите идентификатор для этого абзаца, но вместо ID ID для контейнера DIV!
- (да, это также дает сигналы для других родителей, до документа, но эй, это просто пример)
- Если я вручную добавить этот пункт к тому же DIV, что «статическая» пункт показывает его идентификатор при нажатии, но «динамический» один еще показывает идентификатор DIV.

Пожалуйста, советую?
(также, мне нужен сценарий, чтобы остаться в нижней части моего кода, так что он может «видеть» все фотографии)

EDIT так что моя точка яснее: я нужен способ, чтобы добавить содержимое в DIV так другие функции см. в новом коде.

Как вы, ребята, замените эту строку так, чтобы образец кода работал по назначению?

$("#DIVnewone").html($txthtml);

источник

2012-02-17 Ado Peder

Главное, когда вы присоединяете события ('on()'), этот элемент еще не находится в DOM. Таким образом, мероприятие не будет прикреплено к нему. Вам нужно либо снова присоединить событие к добавленному элементу, либо использовать делегирование делегаций ('delegate' или [' on() '] (http://api.jquery.com/on/#direct-and-delegated- события) в новом jQuery или 'live', который устарел). – kapa

Вы пытались добавить новый элемент в div, а не устанавливать его через html(), хотя я считаю, что .html() также должен работать.

function createnewone(){ 
    $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>"; 
    $("#DIVnewone").append($txthtml); 
};

, то вы можете использовать ниже ON функции (1.7+), чтобы делать то, что вам нужно это делать, когда у вас есть мыши на селекторе («#TXTnewone»). Обратите внимание, что ниже нужно будет войти в функцию «$(document).ready(function() { ...here... }», это значит, что тег body был загружен при назначении ему события on.

$(document).ready(function() { 
    createnewone(); 
    $("body").on(
     { 
       mouseenter: function() { $(this).css("color","red"); } 
      , mouseleave: function() { $(this).css("color","black"); } 
     } 
     , "#TXTnewone" 
    ); 
});

Ниже приведено описание работы jsFiddle.

источник

2012-02-17 10:21:52 harag

Хм ... ты действительно выглядишь прав. Играя со своей скрипкой, я приближаюсь к тому, что мне нужно. Да, html() работает также в вашем примере ... ключ к вашему сообщению, похоже, динамически меняет CSS. Я расскажу вам, как это происходит. –

Возможно, вы ищете функцию live().

или on(), после того, как JQuery версии 1,7

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

источник

2012-02-17 02:29:01

Скорее всего, моя вина, я не вижу этого. Если я правильно читаю, LIVE/ON будет подписывать элемент на событие ... но это не относится к тексту, который я добавляю через HTML() ... Может быть, если вы объясните больше? –

Разве ваша недавно добавленная текстовая часть вновь добавленного элемента? Просто сделайте эту часть элемента селектора, который вы используете в живой функции. –

Контейнер DIV уже существует (как показано в примере), и то, что я делаю, устанавливается его HTML() в новую строку ... центрированное изображение с привязкой ... и моя функция зависания ищет каждый якорь с конкретный CLASS или ID ... но новые строки кажутся нет a) не разделяют пространство имен других пользователей b) не используют его другое имя CLASS (и нет, это не опечатка) Я отредактировал исходный вопрос, чтобы его легче было см. то, что я ищу: html() добавляет текст, но новый текст не ведет себя как обычный текст. –

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

EDIT
ответ Роберта Харви намного лучше, чем это, но идея та же.

источник

2012-02-17 02:29:42

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

ответ

Смежные вопросы