События 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" с атрибутом данных data-targetsize="0.05" и класс zoomTarget будет увеличено при нажатии.

Пример: <img class="zoomTarget lot" data-targetsize="0.05" src="../images/sold.png"/>

Я добавляю элементы к lotmap, Любая помощь будет оценена.

РЕДАКТИРОВАТЬ: событие запускается, но мне нужно, чтобы события плагина работали как раньше, прежде чем добавлять элементы динамически.

Answer 1

У меня была такая же проблема с zoomooz. В этом примере вы создаете новые элементы, нажимая кнопку. После создания нового элемента вы просто вызываете zoomooz для него с помощью zoomTarget():

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

Не идеальный пример, но я загрузил на свой сервер рабочую копию, которая включает в себя несколько моих заметок по этому вопросу, а также ссылку для скачивания, чтобы вы могли взять пример и настроить его под свои нужды.