Нажмите Event не работает После Class Change

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

Как пара людей уже упоминалось, событие делегации является ключом к связыванию с селекторов, которые пока не соответствуют. Альтернативное предположение о привязке к универсальному селектору .button, который всегда будет существовать, а затем поддерживать состояние (максимизированное или восстановленное) в переменной, также имеет силу.

Ваша проблема с открытием панели и последующим закрытием, похоже, заключается в том, что вы сразу же внесете класс .btn-restore внутри обработчика событий. Это не должно произойти, но похоже, что событие click снова запускается на новом селекторе (возможно, что-то связано с mouseup и mousedown компонентами события click?).Я хотел бы предложить оборачивать ваши 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 больше не будет ссылаться на элемент с щелчком (быстрый поиск «области javascript и этого» или аналогичный объяснит это дополнительно, если потребуется). Также не повредит кеширование $ (этого) результата в любом случае.

Надеюсь, что это сработает для вас - сообщите мне, если я могу помочь.

Answer 2

Попробуйте это:

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

вместо:

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

делегированного событие должно связываться с чем-то, что существует в йоте и во второй части будет определять элемент ('# dashboard- действия .btn-restore '), на которые вы хотите нажать.

Answer 3

Вы должны использовать event delegation, так как класс динамически изменяется.

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

При связывании обработчика событий на начальном этапе, не существует ни одного элемента с классом btn-restore, поэтому событие щелчка после смены класса не срабатывает.

Кроме того, я вижу, что btn-maximize изменен, из этого позже добавлено/переключено. Я бы предложил использовать один общий класс, например «btn-toggle», а затем добавить/удалить btn-maximize/btn-restore. Это предотвратит добавление двух отдельных обработчиков событий.

Answer 4

Проверьте Jquery Documentation

Так может быть, вы должны поставить что-то вроде этого.

используя Чайлдс элемент # приборной панели действий

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

и внутри функции с помощью hasClass documentation

$(this).hasClass('className')