Событие jQuery click не работает независимо

Question

У меня проблема с кодом jQuery. Вот код:

code sample

Проблемные детали с:

$(document).unbind('click').on('click', '#a_del', function() { 
    $('.a_frm > .frmlabel:last').remove(); 
    a_counter--; 
    $('#a_field_count').attr('value', a_counter); 
    }); 

$(document).unbind('click').on('click', '#b_del', function() { 
    $('.b_frm > .frmlabel:last').remove(); 
    b_counter--; 
    $('#b_field_count').attr('value', b_counter); 
    }); 

Проблема заключается в том, что кнопка удаления не работает для обеих форм. Если я добавлю только один из этого кода кнопки удаления, он удалит правильные поля формы. Но когда я добавляю код для кнопок удаления второй формы, то работает только последние кнопки удаления формы, а кнопки первой формы больше не работают .. Я не понимаю, в чем проблема. Спасибо!

Answer 1

Используйте прочь и пространство имен:

DEMO

$(document).off('click.a').on('click.a', '#a_del', function() { 
    $('.a_frm > .frmlabel:last').remove(); 
    a_counter--; 
    $('#a_field_count').attr('value', a_counter); 
    }); 

$(document).off('click.b').on('click.b', '#b_del', function() { 
    $('.b_frm > .frmlabel:last').remove(); 
    b_counter--; 
    $('#b_field_count').attr('value', b_counter); 
    }); 

Но, как вы используете делегирование, я не знаю, почему вы хотите, чтобы отвязать его ?!