班级更改后单击事件不起作用

Posted 2023-03-05

【中文标题】班级更改后单击事件不起作用

【英文标题】：Click Event Not Working After Class Change

【发布时间】：2015-08-24 14:26:12

【问题描述】：

我有以下脚本：

// dashboard maximize
$('#dashboard-actions .btn-maximize').click(function() 

    // max / restore buttons
    $(this).removeClass('btn-maximize').addClass('btn-restore');
    $(this).find('span').removeClass('icon-maximize').addClass('icon-restore');

    // swap tables
    $('#table-dashboard-actions-mini').hide();
    $('#table-dashboard-actions').show();

    // show form
    $('#form-dashboard-actions-btm').show();

    // restyle panel
    $(this).parents('.panel-dashboard').addClass('panel-dashboard-max');

    // animate panel
    $(this).parents('.panel-dashboard').animate(
            width: "100%",
        , 250, function() 
        // Animation complete.
    );
    $(this).parents('.panel-primary').animate(
            height: "725px"
        , 250, function() 
        // Animation complete.
    );

);

如您所见，脚本在某一时刻将点击按钮的类更改为.btn-restore

但这意味着我似乎无法将事件绑定到.btn-restore

我原来有这个：

// dashboard restore
$('#dashboard-actions .btn-restore').click(function() 

    alert('asdf');
);

而且alert语句没有用，所以我改成这样：

$('#dashboard-actions .btn-restore').on('click', function() 

但仍然没有快乐。谁能看到我做错了什么？

【问题讨论】：

委托事件，例如：$('#dashboard-actions').on('click', ' .btn-restore', function() ...);。如果你想删除之前绑定到.btn-maximize 的事件，也可以委托这个事件

【参考方案1】：

你需要使用event delegation，因为类是动态变化的。

$('#dashboard-actions').on('click','.btn-restore', function() 

最初绑定事件处理程序时，不存在类btn-restore的元素，因此类更改后的点击事件不会触发。

另外，我看到 btn-maximize 被更改，这是稍后添加/切换的，我建议使用像“btn-toggle”这样的单个通用类，然后添加/删除 btn-maximize/btn-restore。这将阻止添加两个单独的事件处理程序。

【参考方案2】：

试试这个：

$(document).on('click','#dashboard-actions .btn-restore', function() 

代替：

$('#dashboard-actions .btn-restore').on('click', function() 

委托事件必须绑定到 dom 中存在的东西，并且在第二部分中将定义要触发点击的元素（'#dashboard-actions .btn-restore'）。

【讨论】：

#dashboard-actions 似乎是静态的，在其级别绑定事件可能会更好，但并不重要

感谢您的提示，抱歉回复晚了！这似乎让我的btn-restore 活动正常工作，但结果有点出乎意料。现在，每当btn-maximize 事件触发时，还原事件就会在它之后运行。所以基本上面板最大化然后立即恢复。为什么在我没有实际点击相关按钮的情况下可能会运行恢复功能？

如果有帮助，我也将页面上传到这里，看看面板如何最大化/恢复后立即 - mattpealing.co.uk/_concept/brdcr/dashboard.html

【参考方案3】：

正如一些人所提到的，事件委托是绑定到尚未匹配的选择器的关键。绑定到将始终存在的通用选择器.button 然后在变量中保持状态（最大化或恢复）的替代建议也是有效的。

您的面板打开然后立即关闭的问题似乎是您立即在事件处理程序中添加了.btn-restore 类。它不应该发生，但似乎 click 事件在新选择器上再次触发（可能与 click 事件的 mouseup 和 mousedown 组件有关？）。我建议将您的 addClass 调用包装在 setTimeout() 中，以确保在任何事件触发后更改类，本质上是将更改“推”到当前执行结束：

var $btn = $(this);
setTimeout(function () 
    $btn.removeClass('btn-maximize').addClass('btn-restore');
    $btn.find('span').removeClass('icon-maximize').addClass('icon-restore');
);

您会注意到新变量$btn。这是必需的，因为您的 setTimeout 函数中的 this 将不再引用单击的元素（如果需要，快速搜索“javascript 范围和 this”或类似内容将进一步解释这一点）。在任何情况下缓存 $(this) 结果也没有什么坏处。

希望对你有用 - 如果我能提供进一步的帮助，请告诉我。

【参考方案4】：

查看Jquery Documentation

所以也许你需要放这样的东西。

使用#dashboard-actions 的子元素

$('#dashboard-actions .button').on('click', function() )

在函数内部使用hasClass documentation

$(this).hasClass('className')