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

我正在使用缩放网页上的元素

但是，当我通过

.append（）

动态添加元素时，元素不会缩放

我厌倦了在上使用

.on，手动操作却没有成功

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

这是我的HTML

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



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

示例：

我正在向
lotmap
添加元素。
任何帮助都将不胜感激

编辑：事件正在触发，但我需要插件事件在动态添加元素之前正常工作。
我对zoomooz也有同样的问题。在本例中，通过单击按钮创建新元素。创建新元素后，只需使用zoomTarget（）对其调用zoomooz即可：

制作一个盒子
函数_调用_zoom（）{
$（“.box”）.zoomTarget（）；
}
$（“按钮”）。单击（函数（）{
$（“#容器”）。附加（“”）；
_调用_zoom（）；
});

这不是一个完美的例子，但我在我的服务器上安装了一个例子，其中包括一堆我的注释以及一个下载链接，这样你就可以抓住这个例子并根据自己的需要进行调整
 这应该行得通，你能展示一下吗？如果你在zoomTarget调用之前添加了一个console.log（“hi”），你能得到什么吗？我想确定点击是否成功显示一个完整的示例，您已经验证该示例完全代表了问题。请不要只显示零散的代码。点击正在启动。但是插件事件不起作用。你必须将插件应用到原始元素吗？如果是这样的话，那么在创建新对象时也需要将其应用于新对象。
    <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>