title: Sortable bind an on click event
body: <p>I have a sortable element of <code>div</code></p>
  
  <pre><code>&lt;div class="question-constructor multiple-choice-problem"&gt;
  &lt;label for="textbox" class="question-label"&gt; #. Edit this to define question: &lt;/label&gt;
     &lt;input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;"&gt;
     &lt;input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;"&gt;
     &lt;input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;"&gt;
     &lt;input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This <code>div</code>s are draggable then are dropped to the sortable. Here is the <code>div</code> where they drop the draggable:</p>
  
  <p><code>&lt;div id="preview" &gt;&lt;/div&gt;</code></p>
  
  <p>Here is my sortable JS:</p>
  
  <pre><code>var sortableIn = 0;
  $('#preview').sortable({
       receive: function(event, ui) {             
          sortableIn = 1;
          $(ui.item).addClass('editable');
       },
       placeholder: 'ph',
       over: function(event, ui) { sortableIn = 1; },
       out: function(event, ui) { sortableIn = 0; },
       start: function( event, ui ) {
                  $(ui.helper).addClass('on-sort');
       },
       beforeStop: function (event, ui) {
              if (sortableIn == 0) { 
                  ui.item.remove(); 
              }
       },
       stop: function( event, ui ) {
              $(this).find('.on-sort').removeClass("on-sort");
       }
  });
  </code></pre>
  
  <p>What I want to do is create an <code>onclick</code> even to the sortable items specificaly. I tried using this:</p>
  
  <pre><code>$(function() {
      $(document).on('click', '#preview ', function() {
          console.log('clickable');
      });
  });
  </code></pre>
  
  <p>But when I clicked the sortable items It clicks every thing. I want to change the text of the <code>label</code> on the sortable div where I specifically clicked.</p>
  
  <p>For example: </p>
  
  <ol>
  <li>I dragged <code>.question-constructor</code> <code>div</code> 3 times to the <code>#preview</code> div. (This will make the <code>#preview</code> sortable div have 3 items)</li>
  <li>When I click the <b>2nd item</b> in the sortable div, I want to change the text label on it to another value( only on this item ).</li>
  </ol>
  
  <p>How can I do this?</p>
  
  <p>If my question is unclear please comment below and I will respond accordingly.</p>