动态添加元素时未触发 JQuery 事件答案

【问题标题】：JQuery events not firing when adding elements dynamically动态添加元素时未触发 JQuery 事件
【发布时间】：2013-11-05 21:40:42
【问题描述】：

我正在使用http://jaukia.github.io/zoomooz/ 来缩放我网页上的元素。

但是，当我通过.append() 动态添加元素时，元素不会缩放。

我厌倦了使用 .on 并手动执行操作但没有成功。

$(document).on("click", ".lot", function () {
                $(this).zoomTarget();
            });

这是我的 HTML

 <div class="zoomViewport">
            <div class="lotmap zoomContainer">
 </div></div>

在div class="zoomViewport" 中添加的任何具有数据属性data-targetsize="0.05" 和类zoomTarget 的元素在单击时都会被缩放。

示例： <img class="zoomTarget lot" data-targetsize="0.05" src="../images/sold.png"/>

我将元素附加到lotmap。任何帮助将不胜感激。

编辑：事件正在触发，但在动态添加元素之前，我需要插件事件像以前一样工作。

【问题讨论】：

这应该可以了，你能展示一下小提琴吗？
如果你在 zoomTarget 调用之前添加一个 console.log("hi") 你会得到什么吗？我想确保点击正在触发
显示您已验证的完整示例完全代表问题。请不要只显示零散的代码。
点击正在触发。但插件事件不起作用。
您是否必须将插件应用于原始元素？如果是这样，那么您在创建它们时也需要将其应用于新的。

标签： javascript jquery events zoomooz

【解决方案1】：

我在使用 zoomooz 时遇到了同样的问题。在此示例中，您通过单击按钮创建新元素。创建新元素后，您只需使用 zoomTarget() 调用 zoomooz：

    <button> Make A Box </button>

    <div class="zoomViewport">
        <div id="container" class="zoomContainer">
            <div class="box zoomTarget"> </div>
        </div>
    </div>

    <script>

        function _calls_zoom(){
            $(".box").zoomTarget();
        }

        $("button").click(function(){
            $("#container").append("<div class='box'></div>");
            _calls_zoom();
        });

    </script>

不是一个完美的例子，但我在我的服务器上uploaded a working copy，其中包括我对此的一堆注释以及一个下载链接，因此您可以获取该示例并根据您的需要进行调整。

【讨论】：