Question

I have a this code:

$('input.error').on('click', function(){
    $(this).removeClass('error').val($(this).data('submitval'));
});

But when I click on a form element with error class like so:

<input id="email" type="email" class="required error" placeholder="Enter Your Email here" name="email" value="">

Nothing happens, and the breakpoint I have set does not get called and none of the code executes. However if I set it to $('input') it does work. My understanding is that .on should cover for changes in the DOM after load. Am I missing something?

Answer 1

Yes, you are: .on() combines live events, delegates and regular events and the syntax you used creates a regular event.

What you wanted is

$('#someparentelement').on('click', 'input.error',function() {
    // ...
});

#someparentelement should be an element that is as close as possible to the input elements but exists at the time when you bind the event.