0

I have recently posted a question here that told me to use .on() to attach elements to dynamically created objects. I'm just having an issue implementing this into my scripts, because I use an element that is from EasyUI:

$(".item").draggable({ ... });
And I'm not quite sure how to modify this to work with .on(). I have tried the following: $('body').on('draggable', '.item', function() { ... }); (gives me an error that : is an unexpected token (the line of code is revert:true,)).

And:
$('body').on('draggable', '.item', draggable({ ... })); but that says draggable is not defined.

Sorry if this is really easy, It's just all going a bit over my head :P

Thanks for any help

Community
  • 1
  • 1
davidpox
  • 135
  • 1
  • 5
  • 18
  • That's not an event handler, because `draggable` isn't an event. It's a widget. – Barmar Dec 31 '15 at 20:26
  • Sorry, I edited the title. – davidpox Dec 31 '15 at 20:28
  • What is a "non-native jquery element"? Your question is about how to run a plugin on a dynamically-created element. There's nothing non-native about that. – Barmar Dec 31 '15 at 20:30
  • i meant that `draggable` isn't native to jquery itself, it requires the easyui plugin. i don't know how to use `draggable` with `on`, because it uses different syntax compared to a normal js/jq function e.g. `click`. – davidpox Dec 31 '15 at 20:44
  • It has nothing to do with whether the function is native to jQuery. You can't use `.on` with `.each`, either, even though it's native to jQuery. – Barmar Dec 31 '15 at 20:46
  • that's something i didn't know, sorry. – davidpox Dec 31 '15 at 20:47
  • The first argument to `.on` is the name of an event. It can bind any event, whether or not it's native to jQuery. – Barmar Dec 31 '15 at 20:48

3 Answers3

2

draggable isn't an event, so you can't attach an event handler to it. It's a jQuery plugin method, and you can't call it on an element until the element exists.

If you're creating the element dynamically, you need to put the code that initializes the plugin into the code that creates the element. So it would look something like:

newElement = $("<div>", { "class": "item" }).draggable({...}).appendTo(something);

When using .load, you can attach the widget in the callback function.

$("#shop").load("showcontent/cat1.html", function() {
    $(this).find(".item").draggable({ ... });
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • I see, thank you. I create the element using an external html file, and load it using `$("#shop").load("shopcontent/cat1.html");`. How would I attach `draggable` to this? – davidpox Dec 31 '15 at 20:58
  • Added that to the answer – Barmar Dec 31 '15 at 21:02
  • Thank you! This works without an error except that the draggable functionality doesn't work, when I try to drag, it just drags either the picture or the `a` tag, as if `draggable` isn't being initialized. Let me know if you want the source so you can take a look? – davidpox Dec 31 '15 at 21:10
  • Does the content loaded from `cat1.html` contain `class="item"` elements? – Barmar Dec 31 '15 at 21:11
  • Then I'm not sure why it's not working. Maybe there's a problem with the options you're passing to `.draggable`. – Barmar Dec 31 '15 at 21:22
  • Could probably be me being stupid... the `class="item"` elements are enclosed in a `li`, `ul` with class `products` and a div with class `cat1`. Would I need to specify any extra parameters due to this? – davidpox Dec 31 '15 at 21:30
  • I don't think any of that should matter. The selector `.item` matches all elements with that class, no matter what they're contained in. Does it work if you have the elements in the original HTML, instead of loading them with AJAX? – Barmar Dec 31 '15 at 21:32
  • Yeah, the `draggable` worked when the `ul` was in the original HTML. I've moved it to a seperate html doc because I want to maintain readability, and not have 40 blocks of "products". – davidpox Dec 31 '15 at 21:36
  • It's really quite odd. Would you suggest opening another question with my issue? Or would you think it's too precise (e.g. wont help many future readers) – davidpox Dec 31 '15 at 23:11
  • Are you still having an issue? When you accepted the answer I assumed it was working. – Barmar Dec 31 '15 at 23:17
  • Yeah I'm still having the issue. I accepted because I assume it's going to be the correct method to get this working, just that maybe we're missing something in the code. My bad if this isn't correct SO etiquette – davidpox Dec 31 '15 at 23:19
  • 1
    There's a forum on the jQuery Easy UI site. Maybe someone there can help, since this seems to be specific to that library. – Barmar Dec 31 '15 at 23:25
  • I'll try there! Thank you so much for all the help man, you're the best :) – davidpox Dec 31 '15 at 23:30
0

for the first issue, it looks like revert:true needs to be an object {revert:true}.

for the second issue you need to pass a callback function to the event listener, you can declare one inline using the function keyword eg.

$('body').on('draggable', '.item', function draggable({ ... }));

or you can pass an anonymous function

$('body').on('draggable', '.item', function({ ... }));

or declare the function elsewhere and pass it to the event listener by reference eg.

function draggable( event ){ ... }
$('body').on('draggable', '.item', draggable));
synthet1c
  • 6,152
  • 2
  • 24
  • 39
  • The problem is that `revert:true` and `proxy:'clone'` are vital to the `draggable` element that EasyUI has. This is my full function: http://pastebin.com/vyA95n0t . This works when I don't use a `on` function, but I need to implement `on` because I'm dynamically creating elements, compared to when I wasn't. – davidpox Dec 31 '15 at 20:32
0

Looks like you are confusing the name of the element with the name of the event. You would call $(".item").draggable({...}) to generate a new element that can be dragged.

To listen to the event of when the element gets dragged, you want to listed to either the onStartDrag, onDrag or onStopDrag. Like this $('.item').on('onStartDrag', function(event) {...}).

See full documentation here: http://www.jeasyui.com/documentation/index.php

ced-b
  • 3,957
  • 1
  • 27
  • 39
  • I edited the title/text to show that I meant the `draggable` element, not an event handler. Thanks though! – davidpox Dec 31 '15 at 20:28
  • @davidpox When you are calling `on()` you are in fact trying to register an event handler. So you have to give it an event. When you want to create an element you have to call `draggable()` not `on()`. – ced-b Dec 31 '15 at 20:34