動態添加元素時無法觸發jQuery事件

Question

我正在使用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"將在div class="zoomViewport"添加的任何具有數據屬性data-targetsize="0.05"和zoomTarget類的zoomTarget都將進行縮放。

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

我將元素添加到lotmap 。 任何幫助，將不勝感激。

編輯：該事件正在觸發，但是我需要插件事件像以前一樣工作，然后才能動態添加元素。

Answer 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>

這不是一個完美的示例，但是我在服務器上上傳了一份工作副本 ，其中包括一堆關於此的注釋以及一個下載鏈接，因此您可以抓住該示例並根據需要進行調整。