jQuery dynamically call event listeners

Question

I have a big Problem: I have many Div Containers on my Page with the class ".element" which I make draggable using jQuery. Now I have the possibility to dynamically create divs with the class "element", and I want to make them draggable as well. So I thought: Simple solution: I just call

$(".element").draggable();

again. But: The whole listener is executed twice then, which unacceptable for me because it sends AJAX-Requests and i don't want them to be sent twice.

So I started to make Functions to call draggable only on the newly created element, which is kind of stupid I guess.

So my question: Is there any better possibility since the live()-Method is deprecated (which was a big mistake in my opinion!)

Please help me!

Kind regards, David

Answer 1

use event.stopPropagation()

in your event..it will stop event to trigger twice....

i hope it work for you...

Answer 2

A fast solution could be to use a data-attr as flag

$(".element:not(data-draggable='1')")
    .draggable()
    .attr("data-draggable","1");

Note: live method is deprecated but you can use on .