не могу добавить класс в JQuery

Question

не могу добавить класс в JQuery

я пытаюсь добавить класс (.trans) в мой недавно созданный клон в jquery. .но его не работает.
…
когда я применяю класс непосредственно к моему объекту, тогда он работает отлично.

То, что я пытаюсь сделать, это ..

Я получаю некоторые изображения из базы данных на мою страницу.
с циклом foreach я отобразил эти изображения ..
затем с помощью метода jquery clone я создаю клон определенного изображения, когда я нажимаю на него, и клон будет отображаться
в другом div.
Теперь я хочу добавить определенный класс в мой недавно созданный клон. но это не работает ..
(ПРИМЕЧАНИЕ: когда я применяю тот же класс непосредственно к свежему объекту (не клону), в это время он работает)

только для справки конечный результат должен выглядеть примерно так, но после создания клона http://jsfiddle.net/66Bna/293/

вот мой код …

<?php
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";

$image = explode(",", $image);
?>
<html>
<head>
<link rel="stylesheet" href="../css/jquery.freetrans.css">


<link rel="stylesheet" href="../css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>

<style>
body{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
}

.shape{
width: 300px;
height: 250px;
background-color: #B2D237;
color: #123456;
}

#bounds {
position: absolute;
border: 1px solid red;
}

.block{
width:100%;
background:red;
}
</style>

</head>
<body>

<div class="library">
<ul>
<?php
foreach ($image as $key => $img) {
echo "<li class='img_block'><img class='my_image' src='assets/$img'></li>";
}
?>

</ul>
</div>

<div class="block"></div>



<script src="../js/Matrix.js"></script>
<script src="../js/jquery.freetrans.js"></script>

<script>
$(function(){
// do a selector group
$('.trans').freetrans({
x: 50,
y: 50
});

//updating options, chainable
$('#two').freetrans({
x: 200,
y: 100,
angle: 45,
'rot-origin': "50% 100%"})
.css({border: "1px solid pink"})

var b = $('#two').freetrans('getBounds');
console.log(b, b.xmin, b.ymax, b.center.x);

$('#bounds').css({
top: b.ymin,
left: b.xmin,
width: b.width,
height: b.height
})
})
</script>



</body>
</html>

3

clone jquery php transform

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Хорошо смотри Происходит то, что вы активируете плагин «Свободное преобразование» в конце документа, и все, что делает плагин, — это берет существующие элементы с этим классом и предоставляет им функции.

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

Понял?

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

1) Поместите этот скрипт внизу, под объявлением плагина Free Transform.

<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>

2) Инициализировать плагин для каждого добавленного элемента РЕДАКТИРОВАТЬ: Исправлена логическая ошибка

<script>
$(document).ready(function(){
$(".my_image").click(function() {
$(this).clone().appendTo(".block").freetrans({
x: 50,
y: 50
});;
});
});
</script>

Просто попробуйте это сейчас

1