title: Get li ID in a nested list created by nestable.js plugin
body: <p>I'm using Nestable.js plugin. I'm wondering how can I get access to the li element I'm clicking on. I'm trying to do it with the code below, but nothing is happening. </p>
  
  <pre><code>$('.dd-item').on('change', function(Event) {
          console.log(Event.target);
      });
  
      $('.dd-item').on('click', function(Event) {
          console.log(Event.target);
      });
  </code></pre>
  
  <p>If someone could take a look at it, I left all the files I'm using below. The code above is inserted in the HTML one.</p>
  
  <p>This is my HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="appearance.css"&gt;&lt;/link&gt;
      &lt;script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="dd"&gt;
      &lt;ul class="dd-list"&gt;
          &lt;li class="dd-item" data-id="1"&gt;
              &lt;div class="dd-handle"&gt;Item 1&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item" data-id="2"&gt;
              &lt;div class="dd-handle"&gt;Item 2&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item" data-id="apples"&gt;
              &lt;div class="dd-handle"&gt;Apples&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item"  data-id="oranges"&gt;
              &lt;div class="dd-handle"&gt;Oranges&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item" data-id="bananas"&gt;
              &lt;div class="dd-handle"&gt;Bananas&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item" data-id="strawberries"&gt;
               &lt;div class="dd-handle"&gt;Strawberries&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dd-item" data-id="3"&gt;
              &lt;div class="dd-handle"&gt;Item 3&lt;/div&gt;
              &lt;ul class="dd-list"&gt;
                  &lt;li class="dd-item" data-id="4"&gt;
                      &lt;div class="dd-handle"&gt;Item 4&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="dd-item" data-id="5"&gt;
                      &lt;div class="dd-handle"&gt;Item 5&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  
  
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="nestable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $('.dd').nestable('');
  
      $('.dd-item').on('change', function(Event) {
          console.log(Event.target);
      });
  
      $('.dd-item').on('click', function(Event) {
          console.log(Event.target);
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  * html .cf { zoom: 1; }
  *:first-child+html .cf { zoom: 1; }
  
  /*NESTABLE*/
  .dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }
  
  .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
  .dd-list .dd-list { padding-left: 30px; }
  .dd-collapsed .dd-list { display: none; }
  
  .dd-item,
  .dd-empty,
  .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
  
  .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
      background: #fafafa;
      background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
      background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
      background:         linear-gradient(top, #fafafa 0%, #eee 100%);
      -webkit-border-radius: 3px;
              border-radius: 3px;
      box-sizing: border-box; -moz-box-sizing: border-box;
  }
  .dd-handle:hover { color: #2ea8e5; background: #fff; }
  
  .dd-item &gt; button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
  .dd-item &gt; button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
  .dd-item &gt; button[data-action="collapse"]:before { content: '-'; }
  .button_make_container &gt; .dd_item
  
  .dd-placeholder,
  .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
  .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
      background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                        -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
      background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                           -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
      background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                                linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
      background-size: 60px 60px;
      background-position: 0 0, 30px 30px;
  }
  
  .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
  .dd-dragel &gt; .dd-item .dd-handle { margin-top: 0; }
  .dd-dragel .dd-handle {
      -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
              box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
  }
  
  #button_make_container {
     border: 1px outset blue;
     background-color: lightBlue;
     float: right;
  }
  </code></pre>
  
  <p>And here is nestable:</p>
  
  <pre><code>/*!
   * Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
   * Dual-licensed under the BSD or MIT licenses
   */
  ;(function($, window, document, undefined)
  {
      var hasTouch = 'ontouchstart' in document;
  
      /**
       * Detect CSS pointer-events property
       * events are normally disabled on the dragging element to avoid conflicts
       * https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
       */
      var hasPointerEvents = (function()
      {
          var el    = document.createElement('div'),
              docEl = document.documentElement;
          if (!('pointerEvents' in el.style)) {
              return false;
          }
          el.style.pointerEvents = 'auto';
          el.style.pointerEvents = 'x';
          docEl.appendChild(el);
          var supports = window.getComputedStyle &amp;&amp; window.getComputedStyle(el, '').pointerEvents === 'auto';
          docEl.removeChild(el);
          return !!supports;
      })();
  
      var defaults = {
              listNodeName    : 'ol',
              itemNodeName    : 'li',
              rootClass       : 'dd',
              listClass       : 'dd-list',
              itemClass       : 'dd-item',
              dragClass       : 'dd-dragel',
              handleClass     : 'dd-handle',
              collapsedClass  : 'dd-collapsed',
              placeClass      : 'dd-placeholder',
              noDragClass     : 'dd-nodrag',
              emptyClass      : 'dd-empty',
              expandBtnHTML   : '&lt;button data-action="expand" type="button"&gt;Expand&lt;/button&gt;',
              collapseBtnHTML : '&lt;button data-action="collapse" type="button"&gt;Collapse&lt;/button&gt;',
              group           : 0,
              maxDepth        : 5,
              threshold       : 20
          };
  
      function Plugin(element, options)
      {
          this.w  = $(document);
          this.el = $(element);
          this.options = $.extend({}, defaults, options);
          this.init();
      }
  
      Plugin.prototype = {
  
          init: function()
          {
              var list = this;
  
              list.reset();
  
              list.el.data('nestable-group', this.options.group);
  
              list.placeEl = $('&lt;div class="' + list.options.placeClass + '"/&gt;');
  
              $.each(this.el.find(list.options.itemNodeName), function(k, el) {
                  list.setParent($(el));
              });
  
              list.el.on('click', 'button', function(e) {
                  if (list.dragEl) {
                      return;
                  }
                  var target = $(e.currentTarget),
                      action = target.data('action'),
                      item   = target.parent(list.options.itemNodeName);
                  if (action === 'collapse') {
                      list.collapseItem(item);
                  }
                  if (action === 'expand') {
                      list.expandItem(item);
                  }
              });
  
              var onStartEvent = function(e)
              {
                  var handle = $(e.target);
                  if (!handle.hasClass(list.options.handleClass)) {
                      if (handle.closest('.' + list.options.noDragClass).length) {
                          return;
                      }
                      handle = handle.closest('.' + list.options.handleClass);
                  }
  
                  if (!handle.length || list.dragEl) {
                      return;
                  }
  
                  list.isTouch = /^touch/.test(e.type);
                  if (list.isTouch &amp;&amp; e.touches.length !== 1) {
                      return;
                  }
  
                  e.preventDefault();
                  list.dragStart(e.touches ? e.touches[0] : e);
              };
  
              var onMoveEvent = function(e)
              {
                  if (list.dragEl) {
                      e.preventDefault();
                      list.dragMove(e.touches ? e.touches[0] : e);
                  }
              };
  
              var onEndEvent = function(e)
              {
                  if (list.dragEl) {
                      e.preventDefault();
                      list.dragStop(e.touches ? e.touches[0] : e);
                  }
              };
  
              if (hasTouch) {
                  list.el[0].addEventListener('touchstart', onStartEvent, false);
                  window.addEventListener('touchmove', onMoveEvent, false);
                  window.addEventListener('touchend', onEndEvent, false);
                  window.addEventListener('touchcancel', onEndEvent, false);
              }
  
              list.el.on('mousedown', onStartEvent);
              list.w.on('mousemove', onMoveEvent);
              list.w.on('mouseup', onEndEvent);
  
              console.log(list);
  
          },
  
          serialize: function()
          {
              var data,
                  depth = 0,
                  list  = this;
                  step  = function(level, depth)
                  {
                      var array = [ ],
                          items = level.children(list.options.itemNodeName);
                      items.each(function()
                      {
                          var li   = $(this),
                              item = $.extend({}, li.data()),
                              sub  = li.children(list.options.listNodeName);
                          if (sub.length) {
                              item.children = step(sub, depth + 1);
                          }
                          array.push(item);
                      });
                      return array;
                  };
              data = step(list.el.find(list.options.listNodeName).first(), depth);
              return data;
          },
  
          serialise: function()
          {
              return this.serialize();
          },
  
          reset: function()
          {
              this.mouse = {
                  offsetX   : 0,
                  offsetY   : 0,
                  startX    : 0,
                  startY    : 0,
                  lastX     : 0,
                  lastY     : 0,
                  nowX      : 0,
                  nowY      : 0,
                  distX     : 0,
                  distY     : 0,
                  dirAx     : 0,
                  dirX      : 0,
                  dirY      : 0,
                  lastDirX  : 0,
                  lastDirY  : 0,
                  distAxX   : 0,
                  distAxY   : 0
              };
              this.isTouch    = false;
              this.moving     = false;
              this.dragEl     = null;
              this.dragRootEl = null;
              this.dragDepth  = 0;
              this.hasNewRoot = false;
              this.pointEl    = null;
          },
  
          expandItem: function(li)
          {
              li.removeClass(this.options.collapsedClass);
              li.children('[data-action="expand"]').hide();
              li.children('[data-action="collapse"]').show();
              li.children(this.options.listNodeName).show();
          },
  
          collapseItem: function(li)
          {
              var lists = li.children(this.options.listNodeName);
              if (lists.length) {
                  li.addClass(this.options.collapsedClass);
                  li.children('[data-action="collapse"]').hide();
                  li.children('[data-action="expand"]').show();
                  li.children(this.options.listNodeName).hide();
              }
          },
  
          expandAll: function()
          {
              var list = this;
              list.el.find(list.options.itemNodeName).each(function() {
                  list.expandItem($(this));
              });
          },
  
          collapseAll: function()
          {
              var list = this;
              list.el.find(list.options.itemNodeName).each(function() {
                  list.collapseItem($(this));
              });
          },
  
          setParent: function(li)
          {
              if (li.children(this.options.listNodeName).length) {
                  li.prepend($(this.options.expandBtnHTML));
                  li.prepend($(this.options.collapseBtnHTML));
              }
              li.children('[data-action="expand"]').hide();
          },
  
          unsetParent: function(li)
          {
              li.removeClass(this.options.collapsedClass);
              li.children('[data-action]').remove();
              li.children(this.options.listNodeName).remove();
          },
  
          dragStart: function(e)
          {
              var mouse    = this.mouse,
                  target   = $(e.target),
                  dragItem = target.closest(this.options.itemNodeName);
  
              this.placeEl.css('height', dragItem.height());
  
              mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;
              mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;
              mouse.startX = mouse.lastX = e.pageX;
              mouse.startY = mouse.lastY = e.pageY;
  
              this.dragRootEl = this.el;
  
              this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
              this.dragEl.css('width', dragItem.width());
  
              dragItem.after(this.placeEl);
              dragItem[0].parentNode.removeChild(dragItem[0]);
              dragItem.appendTo(this.dragEl);
  
              $(document.body).append(this.dragEl);
              this.dragEl.css({
                  'left' : e.pageX - mouse.offsetX,
                  'top'  : e.pageY - mouse.offsetY
              });
              // total depth of dragging item
              var i, depth,
                  items = this.dragEl.find(this.options.itemNodeName);
              for (i = 0; i &lt; items.length; i++) {
                  depth = $(items[i]).parents(this.options.listNodeName).length;
                  if (depth &gt; this.dragDepth) {
                      this.dragDepth = depth;
                  }
              }
          },
  
          dragStop: function(e)
          {
              var el = this.dragEl.children(this.options.itemNodeName).first();
              el[0].parentNode.removeChild(el[0]);
              this.placeEl.replaceWith(el);
  
              this.dragEl.remove();
              this.el.trigger('change');
              if (this.hasNewRoot) {
                  this.dragRootEl.trigger('change');
              }
              this.reset();
          },
  
          dragMove: function(e)
          {
              var list, parent, prev, next, depth,
                  opt   = this.options,
                  mouse = this.mouse;
  
              this.dragEl.css({
                  'left' : e.pageX - mouse.offsetX,
                  'top'  : e.pageY - mouse.offsetY
              });
  
              // mouse position last events
              mouse.lastX = mouse.nowX;
              mouse.lastY = mouse.nowY;
              // mouse position this events
              mouse.nowX  = e.pageX;
              mouse.nowY  = e.pageY;
              // distance mouse moved between events
              mouse.distX = mouse.nowX - mouse.lastX;
              mouse.distY = mouse.nowY - mouse.lastY;
              // direction mouse was moving
              mouse.lastDirX = mouse.dirX;
              mouse.lastDirY = mouse.dirY;
              // direction mouse is now moving (on both axis)
              mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX &gt; 0 ? 1 : -1;
              mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY &gt; 0 ? 1 : -1;
              // axis mouse is now moving on
              var newAx   = Math.abs(mouse.distX) &gt; Math.abs(mouse.distY) ? 1 : 0;
  
              // do nothing on first move
              if (!mouse.moving) {
                  mouse.dirAx  = newAx;
                  mouse.moving = true;
                  return;
              }
  
              // calc distance moved on this axis (and direction)
              if (mouse.dirAx !== newAx) {
                  mouse.distAxX = 0;
                  mouse.distAxY = 0;
              } else {
                  mouse.distAxX += Math.abs(mouse.distX);
                  if (mouse.dirX !== 0 &amp;&amp; mouse.dirX !== mouse.lastDirX) {
                      mouse.distAxX = 0;
                  }
                  mouse.distAxY += Math.abs(mouse.distY);
                  if (mouse.dirY !== 0 &amp;&amp; mouse.dirY !== mouse.lastDirY) {
                      mouse.distAxY = 0;
                  }
              }
              mouse.dirAx = newAx;
  
              /**
               * move horizontal
               */
              if (mouse.dirAx &amp;&amp; mouse.distAxX &gt;= opt.threshold) {
                  // reset move distance on x-axis for new phase
                  mouse.distAxX = 0;
                  prev = this.placeEl.prev(opt.itemNodeName);
                  // increase horizontal level if previous sibling exists and is not collapsed
                  if (mouse.distX &gt; 0 &amp;&amp; prev.length &amp;&amp; !prev.hasClass(opt.collapsedClass)) {
                      // cannot increase level when item above is collapsed
                      list = prev.find(opt.listNodeName).last();
                      // check if depth limit has reached
                      depth = this.placeEl.parents(opt.listNodeName).length;
                      if (depth + this.dragDepth &lt;= opt.maxDepth) {
                          // create new sub-level if one doesn't exist
                          if (!list.length) {
                              list = $('&lt;' + opt.listNodeName + '/&gt;').addClass(opt.listClass);
                              list.append(this.placeEl);
                              prev.append(list);
                              this.setParent(prev);
                          } else {
                              // else append to next level up
                              list = prev.children(opt.listNodeName).last();
                              list.append(this.placeEl);
                          }
                      }
                  }
                  // decrease horizontal level
                  if (mouse.distX &lt; 0) {
                      // we can't decrease a level if an item preceeds the current one
                      next = this.placeEl.next(opt.itemNodeName);
                      if (!next.length) {
                          parent = this.placeEl.parent();
                          this.placeEl.closest(opt.itemNodeName).after(this.placeEl);
                          if (!parent.children().length) {
                              this.unsetParent(parent.parent());
                          }
                      }
                  }
              }
  
              var isEmpty = false;
  
              // find list item under cursor
              if (!hasPointerEvents) {
                  this.dragEl[0].style.visibility = 'hidden';
              }
              this.pointEl = $(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
              if (!hasPointerEvents) {
                  this.dragEl[0].style.visibility = 'visible';
              }
              if (this.pointEl.hasClass(opt.handleClass)) {
                  this.pointEl = this.pointEl.parent(opt.itemNodeName);
              }
              if (this.pointEl.hasClass(opt.emptyClass)) {
                  isEmpty = true;
              }
              else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {
                  return;
              }
  
              // find parent list of item under cursor
              var pointElRoot = this.pointEl.closest('.' + opt.rootClass),
                  isNewRoot   = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');
  
              /**
               * move vertical
               */
              if (!mouse.dirAx || isNewRoot || isEmpty) {
                  // check if groups match if dragging over new root
                  if (isNewRoot &amp;&amp; opt.group !== pointElRoot.data('nestable-group')) {
                      return;
                  }
                  // check depth limit
                  depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
                  if (depth &gt; opt.maxDepth) {
                      return;
                  }
                  var before = e.pageY &lt; (this.pointEl.offset().top + this.pointEl.height() / 2);
                      parent = this.placeEl.parent();
                  // if empty create new list to replace empty placeholder
                  if (isEmpty) {
                      list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
                      list.append(this.placeEl);
                      this.pointEl.replaceWith(list);
                  }
                  else if (before) {
                      this.pointEl.before(this.placeEl);
                  }
                  else {
                      this.pointEl.after(this.placeEl);
                  }
                  if (!parent.children().length) {
                      this.unsetParent(parent.parent());
                  }
                  if (!this.dragRootEl.find(opt.itemNodeName).length) {
                      this.dragRootEl.append('&lt;div class="' + opt.emptyClass + '"/&gt;');
                  }
                  // parent root list has changed
                  if (isNewRoot) {
                      this.dragRootEl = pointElRoot;
                      this.hasNewRoot = this.el[0] !== this.dragRootEl[0];
                  }
              }
          }
  
      };
  
      $.fn.nestable = function(params)
      {
          var lists  = this,
              retval = this;
  
          lists.each(function()
          {
              var plugin = $(this).data("nestable");
  
              if (!plugin) {
                  $(this).data("nestable", new Plugin(this, params));
                  $(this).data("nestable-id", new Date().getTime());
              } else {
                  if (typeof params === 'string' &amp;&amp; typeof plugin[params] === 'function') {
                      retval = plugin[params]();
                  }
              }
          });
  
          return retval || lists;
      };
  
  })(window.jQuery || window.Zepto, window, document);
  </code></pre>
  
  <p>Thanks!</p>