jquery dynamically added divs firing a function more than once

Question

I have a page where I add divs dynamically. All Divs are draggable and resizable. If I click on the div, it should become editable. Here is my test code.

http://jsfiddle.net/hqhqb5ut/1/

Click on the first Div to see this.

But If I click to drag the div, only dragging should happen. This works fine if there is only one div. But If I add more divs, only the last one behaves correctly. The previous ones become editable, even if I drag.

I checked the console, and it seems like the function is being called multiple times because there are more than one div with same class.

How can I solve this?

UPDATE 1: I have the dynamic part figured out. I saw the SO question, that was suggested as duplicate. But here is a specific problem. If you click on the "Add div", and try to drag the divs, only the LAST ADDED DIV can be dragged. offcourse, there is a function to check if it is being dragged, but that fails due to multiple divs.

http://jsfiddle.net/hqhqb5ut/1/

Answer 1

Use event delegation and your code should work fine:

$('#documentMain').on('mousedown', '.dv1', function() { ..... });

Demo

As you can see in the demo, the change makes the added divs both editable and draggable multiple times.