无法在 jquery 中添加 class

Question

我正在尝试将 class (.trans) 添加到我在 jquery 中新制作的克隆中。 .但它不工作。 ... 当我将 class 直接应用于我的对象时，它可以完美地工作。

我想做的是..

我从数据库中获取一些图像到我的页面。
使用 foreach 循环我显示了那些图像..
然后在 jquery 克隆方法的帮助下，我创建了一个特定图像的克隆，当我点击它时，克隆将显示在不同的 div.
现在我想将一个特定的 class 添加到我新创建的克隆中。但它不工作.. （注意：当我直接在新对象（不是克隆）上应用相同的 class 时它正在工作）

仅供参考最终结果应该是这样的但是克隆之后.. 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>

Answer 1

好的，看。正在发生的事情是，您在文档末尾激活了自由变换插件，而该插件所做的只是利用现有元素 class 并赋予它们功能。

当我们动态添加元素和 classes 时，插件不会考虑它们，因为在调用插件时，元素不存在。

明白了吗？

所以，鉴于我没有合适的开发环境，我会提出一些可能的解决方案：

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>

暂时试试

无法在 jquery 中添加 class

cant add class in jquery

php

jquery

clone

transform