Как захватить события наведения мыши на динамически добавленные входные HTML-элементы с помощью jQuery? - PullRequest
Новая
       7

Как захватить события наведения мыши на динамически добавленные входные HTML-элементы с помощью jQuery?

2 голосов
/ 31 июля 2010

Я динамически добавляю input элементов к table с id из inputDataElements.

Эти input элементы имеют имя 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;                                                                                                                                                                                                                                                                           
}

Вопрос : Я хотел бы захватить mouseover события на deleteAction -по имени input elements.

У меня есть следующий скрипт jQuery: 

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

Проблема : я не получаю сообщение alert при наведении мыши на input element.

Есть ли способ перехватить событие mouseover с помощью jQuery, когда элементы добавляются динамически?

1 Ответ

4 голосов
/ 31 июля 2010

Самый простой способ - использовать .live()

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

или вы можете использовать .delegate(), что аналогично (и, вероятно, предпочтительнее в этом случае). 

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

Они оба работают, фиксируя всплывающее событие. .live() захватывает его в корне, тогда как .delegate() захватывает его в #inputDataElements в этом случае.

В противном случае вам придется привязывать событие по мере (или после) создания элементов.

...