JQuery contextmenu Not Working On Appended Elements

Question

JSFiddle Demo

On my mail side nav I have a custom right-click hijack of which I have just made it so you can add a new sub-folder as partly seen below;

if ($(this).hasClass('NewSubFolder')) {
    if($('ul.inbox-nav li.Clicked').find('ul').length) {
        $('ul.inbox-nav li.Clicked > ul').prepend("<li class='NewSubFolder'><input type='text'></li>");
    } else {
        $('ul.inbox-nav li.Clicked').append('<ul><li class="NewSubFolder"><input type="text"></li></ul>');
    }
    $("ul.inbox-nav li.Clicked").removeClass('Clicked');
}

This will add another tier where there is not one to prepend where there is, an input field. Currently you have to hit the enter key after typing something for the new folder name and then it will have worked its magic...

...However this newly appended list item does not work when you right-click it.

Answer 1

Hopefully this gets what you need done.

Let me know if the comments are not clear enough.

EDIT

Made an edit to combine the two on(contextmenu) calls into one function. No need for redundancy.

$(document).ready(function() {

  // Trigger action when the contexmenu is about to be shown
  $('#inbox-nav').on("contextmenu", 'a', function(event) {

    event.preventDefault();
    $('.clicked').removeClass('clicked'); //Gets rid of all other clicked elements
    $(this).closest('li').addClass('clicked');
    //Clicks the closest li element
    var menu = ($(this).is('#inbox-nav>li>a')) ? 'MailMenuFirstTier' : 'MailMenuSecondTier';
    /*This is an inline if statement, read in words it goes like this:
      if this element is a direct level link, then we're going to need to use the first menu tier.
      else we're going to need use the second menu tier.
    */

    $("#" + menu).finish().show(100)
      //dynamically calls the menu we're using.
      .css({
        left: event.pageX,
        top: event.pageY
      }); //Moves the first mail menu to the event position

  });
  /*
    check the element to see which menut to show instead of using two different things.
  */
  $(document).on('mousedown', function(e) {
    //Mouse down events!
    if ($('.custom-menu').is(':visible') && !$(e.target).parent().hasClass('custom-menu')) {
      /*
      In English:
        if a custom menu is visible, AND the target of the click DOES NOT have the custom-menu class, hide the custom menu.
      */
      $('.custom-menu').finish().hide();
    }

    if ($(e.target).parent().hasClass('custom-menu')) {
      //Figure out what to do since your element is a child of the custom menu
      $('.custom-menu').finish().hide();

      var action = $(e.target).data('action');
      //Gets our action element
      var clicked = $('.clicked');
      //gets the clicked element we will be working on.
      switch (action) {
        case 'new-folder':
          //If the clicked element does not have a child ul element, add one.
          $('input.rename').focusout();
          //Any current input.renames will have their focus out method called
          if (clicked.children('ul').length == 0) {

            clicked.append($('<ul></ul>'))
          }
          var ul = clicked.children('ul');
          //Either this child element existed before or we just made it the step before. 
          var input = $('<input />', {
            type: 'text',
            value: 'New Sub Folder',
            class: 'rename',
            'data-start': 'New Sub Folder',
            focusout: function() {
              var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
              $(this).siblings('a').html(value).show();
              $(this).remove();
            },
            autofocus: true
          });
          //Creates an input tag of type text, with class rename, a placeholder value, and a focusout function.
          var anchor = $('<a>', {
            href: '#',
            css: {
              display: 'none'
            }
          });
          //Creates an anchor tag that is originally hidden
          ul.append($('<li>').append([input, anchor]));
          ul.find('input').click();
          //Adds the (should be selected) element and the anchor
          //The input element takes care of things from there

          break; // end new-folder case
        case 'rename-folder':
          $('input.rename').focusout();
          //any current input.rename items will have their focusout method called
          var anchor = clicked.find('a');
          //get our closest anchor of our clicked element
          anchor.before($('<input />', {
            type: 'text',
            value: anchor.html(),
            class: 'rename',
            'data-start': anchor.html(),
            focusout: function() {
              var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
              $(this).siblings('a').html(value).show();
              $(this).remove();
            },
            autofocus: true
          })).hide();

          //Creates an input element, adds it before the anchor element, 
          //hides anchor element. the newly created input element takes care of things from there
          break;
          /*
          ADD NEW ACTIONS HERE
          */
        default:
          return;
          break;
      }
    }
  }).on('keyup', 'input.rename', function(e) {
    //Used for laziness. If a user hits enter in the input.rename tag, we fire the focusout target
    e.preventDefault();
    if (e.keyCode == 13) {
      $(e.target).focusout();
    }
  });
});

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  font-size: 12px;
}
.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
}
.custom-menu li:hover {
  background-color: #DEF;
}
menu {
  position: absolute;
}
.custom-menu .divider {
  content: " ";
  height: 1px;
  margin: 4px 10px;
  background: #929292;
}
#MailBodyList.custom-menu li.Title {
  color: #929292;
}
#MailBodyList.custom-menu li.Title:hover {
  background: #FFF;
  cursor: default;
}
#MailBodyList.custom-menu li.ForThisSenderMore {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="inbox-nav" id="inbox-nav">
  <li class="active">
    <a href="javascript:;" data-type="inbox" data-title="Inbox">
      <div class="Arrow"></div>Inbox
    </a>
    <ul>
      <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a>
      </li>
      <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a>
      </li>
      <li>
        <a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
        <ul>
          <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a>
          </li>
          <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a>
          </li>
        </ul>
      </li>
      <li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a>
      </li>
      <li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
  </li>
  <li>
    <a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
  </li>
  <li>
    <a href="javascript:;" data-type="draft" data-title="Draft"> Draft
            <span class="badge badge-danger">8</span>
        </a>
  </li>
  <li>
    <a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
            <span class="badge badge-info">23</span>
        </a>
  </li>
  <li>
    <a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
            <span class="badge badge-warning">2</span>
        </a>
  </li>
  <li>
    <a href="javascript:;" data-type="inbox" data-title="News"> News </a>
  </li>
</ul>

<ul id="MailMenuFirstTier" class="custom-menu">
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>

<ul class="custom-menu" id="MailMenuSecondTier">
  <li class="NewSubFolder" data-action="new-folder">New Sub-Folder</li>
  <li class="Rename" data-action="rename-folder">Rename</li>
  <li class="Delete" data-action="delete-folder">Delete</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>

Answer 2

You can use .contextmenu() to overwrite right-clic behavior.

$('.NewSubFolder').contextmenu(function() {
  console.log("Right clic detected!");
});

Documentation here: https://api.jquery.com/contextmenu/

I hope it helps! :)