CODEWITHSUNDEEP
javascriptjquerydynamicselectable
DEV
DEV

Reputation: 2176

To make an dynamic element selectable using jQuery

I am trying to make Item 1, Item 2 and Item 3 selectable.

HTML: 

<div id="container">
   <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>   
   </ul>
</div>

jQuery:

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

I am not able to find out the error.

Upvotes: 2

Views: 3887

Answers (5)

Aman Arora
Aman Arora

Reputation: 1252

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.

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10896

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" />

Upvotes: 0

Ringo
Ringo

Reputation: 3965

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!

Upvotes: 0

matewka
matewka

Reputation: 10148

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();
});

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

Try jQuery on() :

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

Upvotes: 0

Related Questions