Динамическая вставка объектов
Стоит задача, по клику на кнопку #add_element_image добавлять в область контента #contener новые блоки id="image". Упрощенный код:
$(document).ready(function() {
$("#add_element_image").click(function(){
$('#contener').append($('<div id="image"> <img id="resizebleImage" src="pyatnitso_112.jpg" width="200px"height="205px"> </div>'));
});
$("#image").click(function(){
alert("fhfgyu");
});
});
Для нововставленных объектов существуют правила, например, событие на клик. Но оно не срабатывает. Если же сделать так:
$(document).ready(function() {
$('#contener').append($('<div id="image"> <img id="resizebleImage" src="pyatnitso_112.jpg" width="200px"height="205px"> </div>'));
$("#image").click(function(){
alert("fhfgyu");
});
});
, то событие склик срабатывает на созданном объекте. Подскажите в чем ошибка, мне нужно именно динамически вставлять блоки, в результате каких либо событий, и чтобы вставленные объекты подчинялись описанным jqyery правилам. |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#add_element_image").live('click' ,function(){
$('#contener').append($('<div id="image"> <img id="resizebleImage" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" > </div>'));
});
$("#image").live('click' ,function(){
alert("ok!");
});
});
</script>
<button id="add_element_image">Кнопка</button>
<div id="contener" style="height:76px; width:336px; background:#096"></div>
|
А как вот это привязать?
$("#image #resizebleImage").resizable().parent().draggable();
Вроде заработало) :
$("#add_element_image").live('click' ,function(){
$('#contener').append($('<div id="image"> <img id="resizebleImage" src="pyatnitso_112.jpg" width="200px"height="205px"></div></div>'));
$("#image #resizebleImage").resizable().parent().draggable();
});
|
| Часовой пояс GMT +3, время: 02:48. |