javascript - W2UI：面板内加载的内容的单击和其他事件不起作用

Question

我正在使用w2ui 1.5-rc1布局组件。将事件处理程序附加到面板内的元素不会触发操作：

<script>
    $(function() {
         $('#layout').w2layout({
            name: 'mainArea',
            panels: [
                { type: 'left', size: 200, resizable: true, style: panels, content: 'left' },
                { type: 'main', style: main, content: 'main' }
            ]
        });
        w2ui['mainArea'].content('main', $("#list-panel").html());

        $("#mylist li a").click(function() {
           alert( "Handler for .click() called." );
        });
   })
</script>
<div id="layout"></div>
<div id="list-panel" style="visibility: hidden" >
    <ul id="mylist" class="list-group">
        <li><a href="#" onclick="alert('This one will work')"><span>Adele</span></a></li>
        <li><a href="#"><span>Bella</span></a></li>
        <li><a href="#"><span>Carl</span></a></li>
    </ul>
</div>

点击物品Bella或Carl将永远不会触发警报。如果我删除 w2ui 布局，那么一切正常。

<script>
    $(function() {
        $("#mylist li a").click(function() {
           alert( "Handler for .click() called." );
        });
    })
</script>
<div id="list-panel" >
    <ul id="mylist" class="list-group">
        <li><a href="#" onclick="alert('This one will work')"><span>Adele</span></a></li>
        <li><a href="#"><span>Bella</span></a></li>
        <li><a href="#"><span>Carl</span></a></li>
    </ul>
</div>

我注意到当我尝试在面板中添加引导组件或任何其他内容时也会发生同样的情况。永远不会触发这些组件上的单击、更改和其他事件。

知道为什么吗？

Answer 1

根据 w2ui github 存储库中其他用户的建议，将事件附加到文档元素将起作用。

$(document).on("click", "#mylist li a", function() {
   alert( "Handler for .click() called" );
});