Применение JQuery к динамически созданным изображениям

Я новичок в Javascript/Jquery и PHP, и я экспериментирую с ним. В принципе, я создал простую галерею изображений, в которой каждая картина имеет непрозрачность .4, пока вы не нажмете на нее, и она станет 100% непрозрачностью. Теперь я сделал еще один шаг и использовал PHP для сканирования каталога изображений и добавления их в список изображений в галерее. Текущий код выглядит следующим образом:Применение JQuery к динамически созданным изображениям

$(document).ready(function(){ 

var i = 0; 
var names; 

function returndata(files){ 
    names = files; 

    for(i=0; i < names.length ; i++){ 
     $('<li id="img_' + i + '"><img src="../Gallery_pictures/' + names[i] + '"/></li>').appendTo('#thumbnails ul'); 
    }  
} 

$.post('../php/read_directory.php',function(data){ 
    var files = $.parseJSON(data); 
    returndata(files); 
    }); 
});

код работает и добавляет изображения в список на вебе-странице, но как бы я идти о добавлении замирания Jquery к вновь создаваемым образам? Я искал по всему месту для ответа на это, но, может быть, я просто пропущу ответы. Это и изображение исчезают в отдельных внешних файлах Javascript. Заранее спасибо.

* EDIT: * Хорошо, поэтому я получил его для работы с вашими предложениями, но проблема в том, что скрипт не запускается до тех пор, пока изображение изначально не затушевывается. Все снимки начинаются с полной непрозрачности до тех пор, пока они не укроются, а затем все станут непрозрачностью .4. Любой способ исправить это? Я также попытаюсь, если я могу легко сделать это в css.

* DOUBLE EDIT: * Поэтому я могу легко сделать это с помощью css, и он работает, как я хочу. Спасибо за ответы всем.

источник

2011-12-23 Paha

Использование on для установки событий на динамически добавленного контента

$(document).on("mouseover", "#thumbnails img", function() { 
    $(this).css("opacity", 1); 
}); 

$(document).on("mouseout", "#thumbnails img", function() { 
    $(this).css("opacity", 0.4); 
});

Если вы используете JQuery предварительно 1.7, то вы можете использовать delegate. Обратите внимание, что делегат сначала принимает селектор, а затем имя события.

$(document).delegate("#thumbnails img", "mouseover", function() { 
    $(this).css("opacity", 1); 
}); 

$(document).delegate("#thumbnails img", "mouseout", function() { 
    $(this).css("opacity", 0.4); 
});

Избегайте использования live, так как это осуждается.

источник

2011-12-23 07:51:56

Можете ли вы привести пример использования этой функции с помощью определенной функции/плагина, например [hoverpulse] (http://jquery.malsup.com/hoverpulse/jquery.hoverpulse.js). Основная проблема, с которой я сталкиваюсь, заключается в том, что она также ожидает, что некоторые значения будут переданы этой функции, которая возвращается hoverpulse, вызывая ее на селекторе. '$ (document) .ready (function() { $ ('div.thumb img').hoverpulse ({ размер: 40, скорость: 400 }); }); ' Как передать параметры такой функции через on()? – Atharva

Попробуйте добавить class="hoverImg" к вашему img, а затем выполните следующие действия:

$('.hoverImg').on('hover',function(){ 
     // here goes your hover code 
});

Так каждое изображение имеет класс .hoverImg также новые. И вы привязываете событие на каждом изображении, которое имеет класс .hoverImg. И почему вы должны использовать .on() просто потому, что это гарантирует, что код также будет выполнен, если img будут добавлены в ваш dom после того, как он будет полностью загружен.

источник

2011-12-23 07:48:08

Хорошо, поэтому я добавил, что они были в отдельных javascript-файлах сразу после того, как вы ответили. Должен ли я использовать вызов $ .getScript внутри того, что вы мне дали, или просто взять то, что у меня есть во внешнем файле, и разместить его внутри? – Paha

Я бы порекомендовал вам поместить код в .js-файл, и вы просто добавите файл .js в свой раздел head или body, например: –

Используйте .live() или .on(), чтобы связать событие с динамически добавленными элементами.
.live() осуждается в JQuery 1.7

источник

2011-12-23 07:50:47 xyz

Применение JQuery к динамически созданным изображениям

ответ

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