Изменение действия события на основе другого события

Question

Есть ли общепринятый способ изменения действия события JavaScript?

следующее выглядит чистым, но не работает, поскольку первое событие привязано к #link, когда страница отображается, и при изменении класса ничего не меняется. Звучит ли так, как я правильно понимаю это?

$('#change-to-option-1').click(function(){$('#link').attr('class','option-1');}); 
$('#change-to-option-2').click(function(){$('#link').attr('class','option-2');}); 

$('.option-1').click(function(){alert('option 1');}); 
$('.option-2').click(function(){alert('option 2');}); 

<a href="#" id="change-to-option-1">Option 1</a> 
<a href="#" id="change-to-option-2">Option 2</a> 

<a href="#" id="link" class="option-1">Click Me</a> 

Или я должен иметь одно событие, и поставить логику в нем на основе класса элемента (или, может быть data()) вместо того, чтобы, как показано?

$('#link').click(function(){ 
    if(('#link').attr('class')=='option-1') {alert('option 1');} 
    else{alert('option 2');} 
}); 

Или существует общепринятый подход?

Answer 1

Если вы хотите создать триггер события для элемента после изменения его класса/любой идентичности, которую вы использовали для привязки события изначально. Тогда вам нужно пойти за event delegation.

$(document).on("click", ".option-1", function(){ alert('option 1'); }); 

Вы можете ожидать, что код должен быть оптимизирован, если вы используете какой-либо ближайший статический родитель из .option-1 вместо document

Answer 2

Я бы не рекомендовал и предпочитают жестко прописывать ничего. Итак, вот решение, которое позаботится о том, что вы пытаетесь сделать.

$('#change-to-option-1,#change-to-option-2').click(function(){ 
    $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]); 
}); 

$('#link').on('click',$(this).attr("class"), function() 
{ 
     alert($(this).attr("class")); 
}); 

Рабочий пример: https://jsfiddle.net/DinoMyte/39fvpstq/

Если вы планируете ввести больше анкерные связи с аналогичной структурой ID:

$('[id^=change-to-option-]').click(function(){ 
    $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]); 
}); 

$('#link').on('click',$(this).attr("class"), function() 
{ 
     alert($(this).attr("class")); 
}); 

Рабочий пример: https://jsfiddle.net/DinoMyte/39fvpstq/1/

Если вы хотите, чтобы положить все в одном блоке событий:

$('#change-to-option-1,#change-to-option-2').click(function(){ 
    $('#link').unbind('click'); 
    $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]).on('click',$(this).attr("class"), function() 
    { alert($(this).attr("class")); 
    }); 
}); 

Пример: https://jsfiddle.net/DinoMyte/39fvpstq/2/