title: How do I capture mouseover events on dynamically-added input HTML elements using jQuery?
body: <p>I am dynamically adding <code>input</code> elements to a <code>table</code> with the <code>id</code> of <code>inputDataElements</code>. </p>
  
  <p>These <code>input</code> elements have the name <code>deleteAction</code>:</p>
  
  <pre><code>function renderInputDataRows(inputData) {                                                                                                                                                                                                                                                  
      var rows = "";                                                                                                                                                                                                                                                                         
      for (var i = 0; i &lt; inputData.length; i++) {                                                                                                                                                                                                                                           
          rows += '&lt;tr&gt;' +                                                                                                                                                                                                                                                               
              // ...  
              '&lt;td class="rowActions"&gt;' + \
              '&lt;input type="image" ' + \
              '      style="position:relative; ' + \
              '               bottom:-2px; ' + \
              '                 left:-4px; ' + \
              '        padding-right:2px;" ' + \
              '       src="images/delete.png" ' + \
              '   onClick="deleteInputDataRow(' + inputData[i].index + ');"' + \
              '      name="deleteAction" ' + \
              '     value="deleteInputDataRow' + inputData[i].index + '"' + \
              '      size="18,18" ' + \
              '    border="0" /&gt;' + \
              '&lt;/td&gt;' +
              // ...                                                                                                                                                                                                                                               
              '&lt;/tr&gt;';                                                                                                                                                                                                                                                                   
      }                                                                                                                                                                                                                                                                                      
      return rows;                                                                                                                                                                                                                                                                           
  }    
  </code></pre>
  
  <p><strong>Question</strong>: I would like to capture <code>mouseover</code> events on the <code>deleteAction</code>-named <code>input</code> elements.</p>
  
  <p>I have the following jQuery script:</p>
  
  <pre><code>$(document).ready(function() {
      inputDataElementsRowDeleteActions = $("#inputDataElements input:[name=deleteAction]");
      ...
      inputDataElementsRowDeleteActions.mouseover(function(event) {
          alert(event);
      });
  });
  </code></pre>
  
  <p><strong>Problem</strong>: I do not get the <code>alert</code> message when I mouseover the <code>input</code> element.</p>
  
  <p>Is there a way to capture the <code>mouseover</code> event with jQuery, when the elements are added dynamically?</p>