Access Multiple Elements Data Attributes with JQuery On Change Event

I'm attempting to create a way to re-arrange menu items. I am using this Github library: https://github.com/ShinDarth/Nestable

I added two data attributes data-parent and data-sub to my <li>.

data-parent

data-sub

<li>

I am attempting to update those attributes when an item is re-arranged.

So if an item is placed as a child, its data attribute, data-parent, would be the data-id of its parent.
Expanding on that, the parent's own data-sub would become true or 1, meaning it has sub-items.

data-parent

data-id

data-sub

1

Un-parenting a child, would set both the parent and the child's data-parent and data-sub to 0. Since neither are have sub-objects or parents.

data-parent

data-sub

Example:

Take these two items. Notice that data-parent and data-sub are both set to zero.

data-parent

data-sub

<div class="dd nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1" data-name="MenuName1" data-sub="0" data-parent="0" data-new="0" data-deleted="0">
<div class="dd-handle">MenuName1</div>
</li>

<li class="dd-item" data-id="2" data-name="MenuName2" data-sub="0" data-parent="0" data-new="0" data-deleted="0">
<div class="dd-handle">MenuName</div>
</li>
</ol>
</div>


Using the Nestable library to move MenuName2 as a child of MenuName1 would result in the below.

MenuName2

MenuName1

<div class="dd nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1" data-name="MenuName1" data-sub="1" data-parent="0" data-new="0" data-deleted="0">
<div class="dd-handle">MenuName1</div>
<ol class="dd-list">
<li class="dd-item" data-id="2" data-name="MenuName2" data-sub="0" data-parent="1" data-new="0" data-deleted="0">
<div class="dd-handle">MenuName</div>
</li>
</ol>
</li>
</ol>
</div>


In the above code,

MenuName1 - data-sub="1" (Since it has a child)

data-sub="1"

MenuName2 - data-parent="1" (The 1, is the data-id of the parent, in this case 1)

data-parent="1"

data-id

I thought the onChange() event would be a good place to update. But I can't seem to access any of the data elements.

onChange()

$('.dd').on('change', function (e)
/* on change event */
var target = $(e.target);
console.log("reordered " + JSON.stringify(e));
);


How can I access the data attributes of the parent and the child to manipulate them?

change

1 Answer
1

According to the github website example you should use

$('.dd.nestable').on('change', .... )


Might this be your solution?

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.