How do I capture mouseover events on dynamically-added input HTML elements using jQuery?

Question

I am dynamically adding input elements to a table with the id of inputDataElements.

These input elements have the name deleteAction:

function renderInputDataRows(inputData) {                                                                                                                                                                                                                                                  
    var rows = "";                                                                                                                                                                                                                                                                         
    for (var i = 0; i < inputData.length; i++) {                                                                                                                                                                                                                                           
        rows += '<tr>' +                                                                                                                                                                                                                                                               
            // ...  
            '<td class="rowActions">' + \
            '<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" />' + \
            '</td>' +
            // ...                                                                                                                                                                                                                                               
            '</tr>';                                                                                                                                                                                                                                                                   
    }                                                                                                                                                                                                                                                                                      
    return rows;                                                                                                                                                                                                                                                                           
}    

Question: I would like to capture mouseover events on the deleteAction-named input elements.

I have the following jQuery script:

$(document).ready(function() {
    inputDataElementsRowDeleteActions = $("#inputDataElements input:[name=deleteAction]");
    ...
    inputDataElementsRowDeleteActions.mouseover(function(event) {
        alert(event);
    });
});

Problem: I do not get the alert message when I mouseover the input element.

Is there a way to capture the mouseover event with jQuery, when the elements are added dynamically?

Answer 1

The simplest way is to use .live()

inputDataElementsRowActions.live('mouseover', function(event) {
    alert(event);
});

or you could use .delegate() which is similar (and probably preferred in this case).

$("#inputDataElements").delegate('input[name=rowAction]', 'mouseover', function(event) {
    alert(event);
});

They both work by capturing the event that bubbles up. .live() captures it at the root, while .delegate() captures it at the #inputDataElements in this case.

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

Otherwise, you would have to bind the event as (or after) you create the elements.