Question

我有一个cshtml

<td id="device-body">
    <ul>
        <li id="devicesInOffice"></li>
    </ul>
</td>

我试图用一个锚标签列表（如下所示）动态填充li标签

function populateDevicesAvailable(deviceType) {  
    if (deviceType.id != "") {  
        $.post(window.getOfficesDevicesUrl, { devicetypeId: deviceType.id },   
         function (results) {  
            var items = "";  
            $.each(results, function (i, device) {
                items += 
"<a id='" + device.Id + "' href= '" + "#" + "'    
                class='devices'     
                onclick='javascript:populateDeviceInfo()'>" + device.Name + "</a>";  
            });

            $("li#devicesInOffice").append(items);

        });
    }
    else {
        $("li#devicesInOffice").html("");
    }
};  


function populateDeviceInfo() {
}

populateDeviceInfo函数永远不会被调用。当我点击超链接时，我只得到一个错误“object expected”。

我也尝试过其他方式（下面）调用该函数，但没有任何效果。

$(".devices").click(function () {
    populateDeviceInfo();
});

 $("li#devicesInOffice a").click(function () {
    populateDeviceInfo();

有人可以帮我找到一种方法来调用这个函数。谢谢，

Answer 1

使用live，无论何时向DOM动态插入元素，事件处理程序都不会自动附加到

$(".devices").live('click', function () {
    populateDeviceInfo();
});

Answer 2

是的，没错，注册处理程序后添加的链接不会受到影响。这就是jQuery的.live()和.delegate()方法的原因。

<强> Example

Answer 3

如果动态生成元素，则click函数不会影响它，因为click仅绑定到已存在的元素。您需要使用live^[docs]函数：

$(".devices, li#devicesInOffice a").live("click", function() {
  populateDeviceInfo();
}

你会注意到你可以一次使用多个jQuery选择器。这样，您就不必重复代码了。

Answer 4

使用delegate()^[docs]方法将处理程序分配给包含.devices元素的容器。

$(function() {
    $('#devicesInOffice').delegate('.devices','click', populateDeviceInfo);
});

这会在#devicesInOffice元素上放置一个处理程序（只要在加载页面时它就存在）。

在与.devices选择器匹配的任何嵌套元素上发生单击时，将调用该处理程序。

动态形成的Anchor标记不调用click函数

4 个答案: