Asp.Net MVC - JavaScript 使用挖空呈现的元素的事件未触发

Question

我正在使用具有 knockout template binding 生成菜单的 @await Html.PartialAsync('') 将 PartialView 加载到 _Layout.cshtml。

但是子菜单没有填充。如果我在浏览器控制台中手动执行 JS 事件，它会起作用。

这是我的代码。

<script type="text/html" id="treeItem">
    <li>
        <a href="#" data-bind="text: Name"></a>
        <ul data-bind="template: { name: 'treeItem', foreach: SubCategory }"></ul>
    </li>
</script>
<script>    
    viewModel = {
        lookupCollection: ko.observableArray()
    };
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/api/Category",
        }).done(function (data) {
            $(data).each(function (index, element) {
                viewModel.lookupCollection.push(element);            
            });
            ko.applyBindings(viewModel);
        }).error(function (ex) {
            alert("Error");
        });
    });
</script>
<div class="block_content">
    <ul data-bind="template: { name: 'treeItem', foreach: lookupCollection }"></ul>
</div>

main.js -- 菜单的（众多）功能之一

$('#categories_block_left.simple ul li').on('mouseenter', function() {
    var submenuWidth = $(this).parent().width();
    $(this).addClass('active');
    if($('.sidebar').hasClass('right-column')) {
        $(this).hover().find('ul').first().css({'width': submenuWidth, 'right': +submenuWidth}).show();
    } else {
        $(this).hover().find('ul').first().css({'width': submenuWidth, 'right': -submenuWidth}).show();
    }
});

Answer 1

通过更改

修复

$('#categories_block_left.simple ul li').on('mouseenter', function() {

至

$('#categories_block_left.simple ').on('mouseenter','ul li', function() {

Asp.Net MVC - JavaScript 使用挖空呈现的元素的事件未触发

Asp.Net MVC - JavaScript events for elements rendered using knockout are not firing

javascript

asp.net-mvc

knockout.js