JQuery events not firing when adding elements dynamically

Question

I am using http://jaukia.github.io/zoomooz/ to zoom elements on my web page.

However when I am adding elements dynamically through .append() , the elements don't zoom.

I tired using .on and doing stuff manually with no success.

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

This is my HTML

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

Any elements added in the div class="zoomViewport" with data attribute data-targetsize="0.05" and class zoomTarget would be zoomed when clicked.

Example: <img class="zoomTarget lot" data-targetsize="0.05" src="../images/sold.png"/>

I am appending elements to lotmap . Any help would be appreciated.

EDIT: The event is firing but I need the plugin events to work as it used to before adding elements dynamically.

Answer 1

I was having the same issue with zoomooz. In this example you make new elements by clicking the button. After the new element is made, you just call zoomooz on it with 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>

Not a perfect example, but I uploaded a working copy on my server which includes a bunch of my notes on this as well as a download link so you can grab the example and tweak it to your needs.