Не могу добавить класс в 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>

Solutions Collecting From Web of "Не могу добавить класс в jquery"

Ок, смотри. Что происходит, так это то, что вы активируете плагин Free Transform в конце документа, и все, что делает плагин, это взять существующие элементы с этим классом и предоставить им эти функции.

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

Понял?

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

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

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

2) Инициализировать плагин для каждого добавленного элемента EDIT: Исправлена некоторая логическая ошибка

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

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