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.

if you add a console.log("hi") before the zoomTarget call do you get anything? I want to be sure the click is firing — monastic-panic, Nov 05 '13 at 21:47
Show a complete example that you've verified fully represents the problem. Please don't just show scattered bits of code. — Blue Skies, Nov 05 '13 at 21:47
Did you have to apply the plugin to the original elements? If so, then you'll need to apply it to new ones too when you create them. — Blue Skies, Nov 05 '13 at 21:51
Are you attaching the event handler (click) within the document ready event? — emerson.marini, Nov 05 '13 at 21:51
@MelanciaUK: OP is attaching to `document`, which is always present. — Blue Skies, Nov 05 '13 at 21:52
The plugin used to work automatically by adding data-attribute `data-targetsize="0.05"` and class `zoomTarget` — DarknessBeginsHere, Nov 05 '13 at 21:53

score 1 · Answer 1 · answered Sep 18 '16 at 08:10

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.

JQuery events not firing when adding elements dynamically

1 Answers1