Comment capturer des événements mouseover sur des éléments HTML d'entrée ajoutés dynamiquement à l'aide de jQuery?

Question

J'ajoute dynamiquement input éléments à un table avec le id de inputDataElements.

Ces éléments ont input le nom 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: Je voudrais saisir mouseover événements sur les deleteActioninput éléments Baptisée.

J'ai le script jQuery suivant:

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

Problème: Je ne comprends pas le message alert quand je mouseOver l'élément input.

Existe-t-il un moyen de capturer l'événement mouseover avec jQuery, lorsque les éléments sont ajoutés dynamiquement?

Answer 1

La façon la plus simple est d'utiliser .live()

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

ou vous pouvez utiliser .delegate() qui est similaire (et probablement préféré dans ce cas). Ils fonctionnent tous les deux en capturant l'événement qui fait une bulle. .live() le capture à la racine, tandis que .delegate() le capture au #inputDataElements dans ce cas.

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

Sinon, vous devez lier l'événement (ou après), vous créez les éléments.