动态添加元素时不触发 JQuery 事件

JQuery events not firing when adding elements dynamically

本文关键字：JQuery 事件 添加 元素 动态      更新时间：2023-09-26

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

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

我厌倦了使用.on并手动做事，但没有成功。

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

这是我的网页

 <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.任何帮助将不胜感激。

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

我在 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>

不是一个完美的例子，但我在我的服务器上上传了一个工作副本，其中包括一堆我对此的笔记以及一个下载链接，以便您可以获取示例并根据需要进行调整。

相关文章：