调用 bui.dropdown 后绑定其他按钮的事件无效问题。

liuzhilinux commented 4 years ago

首先确定，把调用 bui.dropdown 的那段代码删除，#my-btn 这个按钮的点击事件是有效的，补充 bui.dropdown 调用后表示没有挂载点击事件了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/bui.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
</head>
<body>

<div class="bui-page bui-box-vertical">
    <header>
        <!-- 固定顶部区 -->
        <div class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">BUI标准页面</div>
            <div class="bui-bar-right"></div>
        </div>
    </header>
    <main>
        <!-- 内容区滚动 -->
        <h3 class="section-title">表单选择</h3>
        <ul class="bui-list">
            <li class="bui-btn bui-box clearactive">
                <label class="bui-label">其他按钮:</label>
                <div class="span1">
                    <button id="my-btn">Click Me~</button>
                </div>
            </li>
            <li class="bui-btn bui-box clearactive">
                <label class="bui-label">下拉选择:</label>
                <div class="span1"></div>
                <div class="bui-value">
                    <div id="uiDropdown" class="bui-dropdown">
                        <div class="bui-btn bui-box">
                            <div class="span1">菜单名称</div>
                            <i class="icon-dropdown"></i>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </main>
    <footer>
        <!-- 固定底部区 -->
    </footer>
</div>

<script src="/js/zepto.js"></script>
<script src="/js/bui.js"></script>
<script>
    bui.ready(function () {
        $(document).on('click', '#my-btn', function () {
            console.log('clicked!');
        });

        var uiDropdown = bui.dropdown({
            id: "#uiDropdown",
            data: [{
                name: "广州",
                value: "广州"
            }, {
                name: "广州2",
                value: "广州2"
            }],
            //设置relative为false,二级菜单继承父层宽度
            relative: false,
            callback: function (e) {
            }
        });
    });
</script>
</body>
</html>

例子是用的官网的 Demo ，采用最新版的 BUI 1.6.1 。初次使用这个 UI 框架，如果官方文档有相应的说明，希望能指明一下，谢谢。

liuzhilinux commented 4 years ago

补充说明，把下面的代码

        $(document).on('click', '#my-btn', function () {
            console.log('clicked!');
        });

改成

        // $(document).on('click', '#my-btn', function () {
        $('#my-btn').click(function () {
            console.log('clicked!');
        });

这样就能正常调用了。

liuzhilinux commented 4 years ago

补充 Zepto 版本 Zepto v1.0-1-ga3cab6c 。

imouou commented 4 years ago

框架里面默认绑定了body了, 并且阻止冒泡, 所以document的绑定无效了. 一般通过父级委托就行, 不建议绑定在document或者body上. 另外初次使用, 如果使用单页开发, 请一定使用 router.$ 替换 $选择器.

$("body").on('click', '#my-btn', function() {
        console.log('clicked!');
    });

liuzhilinux commented 4 years ago

了解了，非常感谢。

imouou / BUI-Guide

调用 bui.dropdown 后绑定其他按钮的事件无效问题。 #168