title: Binding click and onchange events together?
body: <p>I have a function that fires on every <code>change</code> event, meaning everytime a <code>radio</code> button is selected from a <code>select</code> list, an empty array updates and displays the content in two different <code>HTML</code> elements: one is <code>div</code> and the other is <code>ul</code>. In the <code>div</code>, I would like to display additional <code>radio</code> button that, if clicked, should also deselect the selected <code>radio</code> buttons from the main list and the <code>ul</code>.</p>
  
  <p>Heres the HTML:</p>
  
  <pre><code>&lt;select id="selectionContainer"&gt;
      &lt;option value="Brown"&gt;Brown&lt;/option&gt;
      &lt;option value="Nicole"&gt;Nicole&lt;/option&gt;
      &lt;option value="Jack"&gt;Jack&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="selectedOptions"&gt;
  // Selected items from `someOptions` will be displayed here as divs with classes
  &lt;/div&gt;
  &lt;div id="selectedOptionsList"&gt;
  // Selected items from `someOptions` will be displayed here as list items
  &lt;/div&gt;
  </code></pre>
  
  <p>Heres the JS:</p>
  
  <pre><code>$(document).ready(function(){
      $('#selectionContainer').multiselect({
      onChange: function(element, checked) {
  
          var arr =[];
          var selectionDiv = $('#selectedOptions').empty();
  
          $('#selectionContainer').find("option:selected").each(function(){
              arr.push($(this).html());
          });
  
  
          for(var i in arr) {
              var selectedOption = '&lt;div&gt;' + arr[i] + '&lt;input type="radio" value="' + arr[i] + '" /&gt;&lt;/div&gt;');
              var optionForList ="&lt;option  value='"+ arr[i] + "'&gt;" + arr[i] + "&lt;/option&gt;";
              $(selectionDiv).append(selectedOption);
              $('#selectedOptionsList').append(optionForList);
      }
      });
  </code></pre>
  
  <p>Now, everything seems to work fine and if I select / deselect the options from <code>someOptions</code>, the new selection gets updated in the <code>div</code> and the <code>ul</code>. But how do I bind the newly created <code>radio</code> buttons to the change event, so when clicked, they can also deselect the items from the <code>ul</code> and <code>select</code> elements also?</p>
  
  <p>I was thinking of using the <code>value</code> property, I just don't know how to bind the <code>radio</code> buttons from <code>#selectedOptions</code> to the <code>on change</code> event of <code>#selectionContainer</code>.</p>