title: Get the title of a selectable item in jQuery
body: <p>I have a list of selectable buttons, whose names are being dynamically generated by reading from a JSON file. Every time a button is clicked, I want the get its title, i.e. row["name"]. Here's my relevant code and the JSON:</p>
  
  <pre><code>&lt;head&gt;
  
  
            &lt;script&gt;
  
                  $.getJSON("json-data.txt",function(data){
                      var items = [];
                      $.each(data['data'],function(i, row){
                          items.push("&lt;li class = 'ui-widget-content'&gt;" + row["name"] + "&lt;/li&gt;");
                      });
                      $("&lt;ol/&gt;",{
                          "id" : "selectable",
                          html : items.join("")
                      }).appendTo("body");
                  });
  
                  var selectableObj = {
                      selected: function(event, ui){ 
  
                      }
                  }
  
                  $(function() {
                      $( "#selectable" ).selectable(selectableObj);
                  });
            &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;/body&gt;
  </code></pre>
  
  <p>The JSON data:</p>
  
  <pre><code>{
    "data": [
      {
        "name": "ABC",
        "visited" : "Yes"
      },
      {
        "name": "DEF",
        "visited" : "Yes"
      },
      {
        "name": "GHI",
        "locked": "No"
      },
  ],
  
  }    
  </code></pre>
  
  <p>This works, in that I get a list of selectables in the format: </p>
  
  <pre><code>&lt;ol id="selectable"&gt;
    &lt;li class="ui-widget-content"&gt;ABC&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;DEF&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;GHI&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>When I click on, say, the first button, I want to get the value "ABC". I don't know how to do this. I read about .text(), but cannot understand to use it. Can anyone help please?</p>
  
  <p>EDIT - Based on some comments, I changed my code like this, but it doesn't work:</p>
  
  <pre><code>&lt;script&gt;
  
                  $(function() {
                      $( "#selectable" ).selectable();
                  });
  
                  $.getJSON("json-data.txt",function(data){
                      var items = [];
                      $.each(data['data'],function(i, row){
                          items.push("&lt;li class = 'ui-widget-content'&gt;" + row["name"] + "&lt;/li&gt;");
                      });
                      $("&lt;ol/&gt;",{
                          "id" : "selectable",
                          html : items.join("")
                      }).appendTo("body");
                  });
  
  
                  $('.ui-widget-content').click(function(){
                      var text = $(this).text(); // this get the text
                      alert(text); // do whatever you want with it
                  });             
            &lt;/script&gt;
  </code></pre>