Можно ли назначать обработчик события внутри другого обработчика?

Question

[Николай]

Нужно добавить класс кнопке при открытии модального окна и удалить класс после закрытия. Можно ли назначить обработчик закрытия окна внутри обработчика открытия? Код ниже работает, но насколько он верный?

$('#gp-advantages_01-modal').on('show.bs.modal', function (event) {
	var button = $(event.relatedTarget) // Button that triggered the modal
	button.addClass('active')
  var textModal = button.data('text-modal')
  var titleModal = button.data('title-modal') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(titleModal)
	modal.find('.modal-body').text(textModal)
	$('#gp-advantages_01-modal').on('hidden.bs.modal', function (e) {
		button.removeClass('active')
	})
})

Comments

[Ярослав Иванов]

можно

[Николай]

Ярослав Иванов,

Может подскажешь почему не убирается фокус с элемента по которому кликнули после закрытия окна.

$('#gp-advantages_01-modal').on('show.bs.modal', function (event) {
	var button = $(event.relatedTarget) // Button that triggered the modal
	button.addClass('active')
  var textModal = button.data('text-modal')
  var titleModal = button.data('title-modal') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(titleModal)
	modal.find('.modal-body').text(textModal)
	$('#gp-advantages_01-modal').on('hidden.bs.modal', function (e) {
		$(event.relatedTarget).removeClass('active').blur()  - ВОТ ЭТА СТРОЧКА НЕ РАБОТАЕТ
	})
})

Answer 1

[Robur]

Можно, но на hide надо этот обработчик удалять. иначе при каждом открытии у вас будет добавляться новый обработчик, и они все будут вызываться на закрытие. В вашем случае вы вряд ли увидите какие-то реальные проблемы, но это неправильно. поставьте рядом с removeClass console.log и откройте-закройте несколько раз - увидите в чем проблема.

но насколько он верный?

Зачем вы так делаете вообще? что мешает навешать сразу два обработчика на открытие и закрытие и все?

Comments

[Николай]

Я так делаю потому-что не знаю как по другому) Можете написать свой пример?

[Robur]

$('#gp-advantages_01-modal').on('show.bs.modal', function (event) {....})
$('#gp-advantages_01-modal').on('hidden.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    button.removeClass('active')
  })

при условии что relatedTarget такой же в hidden.bs.modal как и в show.bs.modal

[Алексей Уколов]

Robur, переменная button объявляется внутри обработчика для show, потому и решение такое было.

[Robur]

Алексей Уколов, ага, я уже поправил комент

[Николай]

Robur, Данный код не удалят класс актив вообще(

$('#gp-advantages_01-modal').on('show.bs.modal', function (event) {
	var button = $(event.relatedTarget) // Button that triggered the modal
	button.addClass('active')
  var textModal = button.data('text-modal')
  var titleModal = button.data('title-modal') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(titleModal)
	modal.find('.modal-body').text(textModal)
});
$('#gp-advantages_01-modal').on('hidden.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    button.removeClass('active')
});

[Николай]

'hidden.bs.modal' в консоли console.log(button) выводит n.fn.init {}

[Николай]

Николай, решил проблему так, но blur() не работает

var button;

$('#gp-advantages_01-modal').on('show.bs.modal', function (event) {
	button = $(event.relatedTarget) // Button that triggered the modal
	button.addClass('active')
  var textModal = button.data('text-modal')
  var titleModal = button.data('title-modal') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(titleModal)
	modal.find('.modal-body').text(textModal)
});

$('#gp-advantages_01-modal').on('hidden.bs.modal', function (event) {
	button.removeClass('active').blur();
});

[Robur]

Николай, так тоже можно.
blur попробуйте поместить в setTimeout, возможно вы блюрите в середине клика.

[Николай]

Robur, помогло! Спасибо!

Answer 2

[Алексей Уколов]

Технически можно, но каждое открытие модалки будет навешивать ещё один обработчик события. В данном случае ничего не сломается, просто N раз будет происходить попытка удаления класса у кнопки, но вообще так делать не стоит. Однако, если вы поставите обработчик при помощи .one(), проблема исчезнет.