无法在jquery中添加类

2024-01-09

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

我想做的是..

  1. 我从数据库中获取一些图像到我的页面。
  2. 使用 foreach 循环我显示了这些图像..
  3. 然后在 jquery 克隆方法的帮助下,当我单击它时,我创建了特定图像的克隆,并且该克隆将显示 在不同的 div 中。
  4. 现在我想向我新创建的克隆添加一个特定的类。但它不工作.. (注意:当我直接在新对象(而不是克隆)上应用相同的类时,它的工作时间)

仅供参考最终结果应该是这样的,但是在克隆之后..http://jsfiddle.net/66Bna/293/ 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>

好吧,看一下。发生的情况是,您在文档末尾激活自由变换插件,该插件所做的就是获取该类的现有元素并赋予它们功能。

当我们动态添加元素和类时,插件不会考虑它们,因为在调用插件时,这些元素并不存在。

明白了吗?

因此,鉴于我没有合适的开发环境,我会建议一些可能的解决方案:

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>

现在就尝试一下

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法在jquery中添加类 的相关文章

  • Zend Framework 中的动态默认模块

    有谁知道在 Zend Framework 中动态设置默认模块并且不会遇到命名空间问题的方法 例如 我想要做的是有一个允许加载的模块表 其中一个设置为默认模块 例如 我可能有 admin blog calendar 作为可以加载的模块 如果我
  • Ajax文件上传

    我想使用 Ajax 和 php 上传文件 我有一个表格
  • PHP DOM - 剥离 span 标签,保留其内容

    我希望采用如下标记 span class test Some text that is strong bolded strong and contains a a href link a span 并在 PHP 中找到剥离跨度的最佳方法 剩
  • Laravel 从 API 响应中删除标头值

    Laravel 应用程序版本 5 6 我希望从 API 响应中显示的 Cache Control 标头中删除 private 值 我有一个中间件添加 无缓存 和 无存储 值 response next request response gt
  • 切换到 mysqli 是个好主意吗?

    我正在考虑为我的所有 php 项目切换到 mysqli 我的代码编写方式 我运行非常简单的网站并构建了自己的基本框架 我在所有网站上使用该框架 我在修改函数和类时不应该遇到太多问题 然而 我只听说过关于准备好的语句的积极的事情 除了一些关于
  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva
  • json_encode 返回 NULL?

    由于某种原因 项目 描述 返回NULL使用以下代码 这是我的数据库的架构 CREATE TABLE staff id int 11 NOT NULL AUTO INCREMENT name longtext COLL
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • Paypal 将钱从一个帐户转移到另一个帐户

    我知道这个建议如何汇款至任何 PayPal 账户 https stackoverflow com questions 1559808 paypal api send money to any paypal account但到目前为止我所尝试
  • 发送 POST 请求时 JSON 原语无效

    我有以下 ajax 请求 其中我尝试将 JSON 对象发送到服务器 function sendData subscriptionJson ajax type POST url Url Action SubscribeSecurities S
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一
  • php date_parse("2010 年 2 月") 给出日期 == 1

    当没有日期时 我将其称为 date parse 中的错误 d date parse Feb 2010 会给 d day 1 请参阅对此的评论date parse 手册页 http php net manual en function dat
  • PHP LDAP 查询获取特定安全组的成员

    我正在努力让 LDAP 查询工作来为我提供安全组的成员 我们的活动目录结构设置为 DC domain DC co dc uk然后 我们有一个名为 公司用户 的 OU 其中有一个用于 IT 和标准的 OU 在这些中我们创建了用户 所以我被设置
  • PHP 中的encodeURI() ?

    PHP 中是否有一些不编码的encodeURI 函数 我现在用这个 function encodeURI url http php net manual en function rawurlencode php https develope
  • jQuery:单击外部元素以“关闭”使用toggleClass 出现的菜单

    我已经构建了一些导航 针对移动网络 它使用 jQuery 中的toggleClass 方法来隐藏和显示菜单 单击 MENU 图标 按钮可在菜单 div 上打开和关闭类 active 显示 隐藏 我一直在拼命寻找一种通过单击菜单外部 页面上的
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相
  • 搜索多维数组 JavaScript

    我有一个如下所示的数组 selected products 0 r1 7up 61 Albertsons selected products 1 r3 Arrowhead 78 Arrowhead selected products 2 r
  • PHP条件,如果当前页面,则链接突出显示[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我有一个带
  • 通过 Sparkpost 发送 iCal 邀请

    我正在尝试使用 SparkPost 通过电子邮件以附件形式发送日历邀请 但收到电子邮件后邀请不会打开 我使用两个文件 calendarinvite php 来创建邀请 使用 Sendemail php 来发送电子邮件 calendarinv

随机推荐