Question

我正在使用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个事件。

我有以下jQuery脚本：

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

问题：当鼠标悬停在alert元素上时，我没有收到input消息。

当动态添加元素时，有没有办法用jQuery捕获mouseover事件？

Answer 1

最简单的方法是使用.live()

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

或者你可以使用类似的.delegate()（在这种情况下可能更喜欢）。

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

他们都通过捕捉起泡的事件来工作。 .live()在根位置捕获，而.delegate()在此情况下在#inputDataElements处捕获它。

否则，您必须在创建元素时（或之后）绑定事件。

如何使用jQuery在动态添加的输入HTML元素上捕获鼠标悬停事件？

1 个答案: