jQuery events to new created div

Question

A visitor could drag and drop different items to multiple containers which have an individual sortable so the items in each container could be changed. At last, every container could be resized. So, this is all working well.

Unfortunately a problem occurred when the visiter create a newly div which is an container. This container should have the same opportunities as the containers which loading while the page loads. But since the container is newly added to the page, the functions aren't working.

I've tried different things like appendTo() and call the functions draggable(), resizable() etc again, but al doesn't working.

You should call the same `functions` after adding the new `elements` — Rohan Kumar, Aug 05 '13 at 08:12
Calling the functions again after creating a new div isn't working well. The items couldn't be dragged to the new div. — Stefan, Aug 05 '13 at 08:26

score 0 · Answer 1 · answered Aug 05 '13 at 08:13

0

If you have some free ressources, use the livequery plugin. (https://github.com/brandonaaron/livequery)

$('.container') 
    .livequery('click', function(event) { 
        alert('clicked'); 
        return false; 
 });

That will apply your functions to all new containers.

answered Aug 05 '13 at 08:13

elasticman

641
8
20

Isn't it better to use the jQuery on() function instead of a plugin? I've read that the draggable function isn't functioning completely with the jQuery on() function. – Stefan Aug 05 '13 at 08:27
I don't get your comment? Why should you use it, if it is not working with on? I'm using the livequery plugin with draggable and it works fine. – elasticman Aug 05 '13 at 08:31

score 0 · Accepted Answer · answered Aug 05 '13 at 08:24

0

It should work if you do something like this, event will be applied to new elements :

$('span').on('resize', function() { ... }); // or whatever event 'click', 'mousedown'..

var label = $(document.createElement('span'));

td.append(label);

answered Aug 05 '13 at 08:24

Thomas

16
2

I've made use of the .on('mouseover') function for activating the draggable options. Thanks for your help! – Stefan Aug 05 '13 at 08:47

jQuery events to new created div

2 Answers2