To make an dynamic element selectable using jQuery

Question 1

First cross check if you have the proper verison of jQuery and download it from here

The problem with the code

$("#outerUL").delegate('li','click',function(event) {
    $(this).selectable();
});

is that :

$(this).selectable();

will be called only when you click on some li child under outerUL. So your first click will not select any element rather it will just make the elements select ready.

Second problem is in this html snippet:

 <ul id="outerUL">                   //static 
   <li id="outerLI">              //dynamic
       <ul id="innerUL">          //dynamic
          <li>Item 1</li>         //dynamic
          <li>Item 2</li>         //dynamic
          <li>Item 3</li>         //dynamic
       </ul>
   </li>

According to your javascript code, every element which is a children of #outerUL should be selectable. So the first time any children of #outerUL is clicked, $(this).selectable(); statement will be called which will make the child outerLIselectable. On the subsequent clicks, jQuery's selectable() function will be called and it will select the full outerLI element.

I think this should solve your problem:

$(function () {
$("#innerUL").selectable();
});

It will make only the children of #innerUL selectable.

Question 2

Try jQuery on() :

$(document).on('click','#outerUL li',function(event) {
    $(this).selectable();
});

Question 3

In the jQuery API documentation you can read:

As of jQuery 1.7, .delegate() has been superseded by the .on() method

You should use jQuery.on()

$("#outerUL").on('click', 'li', function(event) {
    $(this).selectable();
});

Question 4

try this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script>
  $(function() {
    $( "#selectable" ).selectable();
  });
  </script>
</head>
<body>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>


</body>
</html>

Or Read Here. Hope you like!

Question 5

you dont' need any function just check this one FIDDLE

$(function () {
    $("#selectable").selectable();
    $('#btn').click(function(){
        $('#selectable').append('<li class="ui-widget-content">XXX</li>')
    })
});

HTML

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>
<input type="button" id="btn" value="ADD" />