Question

我有以下脚本：

// 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');
});

警报声明没有用，所以我把它更改为：

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

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

Answer 1

试试这个：

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

而不是：

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

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

Answer 2

您需要使用 event delegation ，因为课程会动态更改。

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

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

另外，我看到btn-maximize被改变了，这是后来添加/切换我应该建议使用一个共同的类，如＆＃39; btn-toggle＆＃39;然后添加/删除btn-maximize/btn-restore。这会阻止添加两个单独的事件处理程序。

Answer 3

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

面板打开然后立即关闭的问题似乎是您立即在事件处理程序中添加.btn-restore类。它不应该发生，但似乎click事件再次在新选择器上触发（可能与mouseup事件的mousedown和click组件有关？）。我建议将addClass个来电包裹在setTimeout()之内，以确保在任何事件发生后更改课程，基本上是＆＃34;推送＆＃34;对当前执行结束的更改：

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

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

希望对您有用 - 请告诉我是否可以提供进一步的帮助。

Answer 4

检查Jquery Documentation

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

使用＃dashboard-actions

的childs元素

case class Data(information: Int) extends AsyncIterable[Data]
val data = Data(1) // And more, of course
// Asynchronously print all the information.
data.foreach(data => println(data.information))

并使用hasClass documentation

在函数内部

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

单击“类更改后不工作的事件”

4 个答案: