Question

我正在使用Materialisecss框架。我有一个从屏幕右侧打开的sideNav。

用户通常会从位于页面顶部的菜单中打开它，并在页面加载时生成。单击任何这些项目可以正常打开sideNav。

当我动态加载按钮时也会出现问题，该按钮也应该打开右侧，以便执行它的预期动作。

点击此动态添加所有必需的处理（收集数据，发布到ajax等），但sideNav永远不会打开。

我想也许在动态添加按钮之后初始化按钮就是todo。

所以我使用materializecss代码初始化右侧边栏：

$('.button-collapse-right').sideNav({
    menuWidth: getPanelWidth(), // Default is 240
    edge: 'right', // Choose the horizontal origin
    closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
});

并将其移至单独的功能中：

initializeSideNavRight = function(btnObj) {
    $(btnObj).sideNav({
        menuWidth: getPanelWidth(), // Default is 240
        edge: 'right', // Choose the horizontal origin
        closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
    });
};

然后在生成并将btn添加到DOM之后我立即调用此函数（如下所示）：

    var primaryBtn = '<a href="#!" class="btn btn-primary '+btnClass+' pull-right bulk-action" data-action="'+action+'" data-activates="'+activates+'">'+btnText+'</a>';
    var btnWrapper = $('#bulk-action-button');
    btnWrapper.html(primaryBtn);
    $('#bulk-action-container').removeClass('hide');
    var btn = btnWrapper.find('.button-collapse-right');
    initializeSideNavRight(btn);

问题是，如果我这样做，那么sideNav打开正常，但没有其他东西发射。不知道为什么会这样。

这是触发所有数据收集和ajax页面请求的主要功能：

$(document).on('click', '.action-panel-button', function(e) {
    e.preventDefault();
    console.log('Action panel fired');
    processActionPanel(this);
});

如果我没有运行initializeSideNavRight（），那么工作正常，但是一旦我没有。

我还尝试使用以下方式以编程方式打开sideNav：

$(document).on('click', '.button-collapse-right', function(e) {
    console.log('Registered a click for right sideNav');
    $(this).sideNav('show');    
});

但这会产生一个无限循环，我想知道为什么会发生这种情况。

你可以看到我有点迷失，谁能看到我做错了什么？

Answer 1

所以我在这里找到了@ville提供的解决方案：Validate scoped uniqueness in polymorphic association models.

通过将click事件处理程序交换到我的'.action-panel-button'上的mouseup，在添加到DOM后初始化按钮后，可以触发所有函数。

如何从动态添加的按钮注册/实例化sideNav（）

1 个答案: