jquery – Link click function is not called

Question:

I've had a problem similar to this one before, and it's because the function was built before the button was created. Now I made tertinho after I append on my page I call a function on click.

This is my codepen code: link

For you to understand the idea is that the person clicks on the black buttons to add fields of the desired type, they set the field name and label in the middle div, and in the third div it is shown like this form.

What happens is that I want to be able to remove a field by clicking the blue button, the problem is that this snippet is not called:

$('#remove_input').on("click", function() {
  var count_field = $('#count_field').val();
  var parent_class = $(this).parents('tr');
  if (parent_class.hasClass('pending')) {
    parent_class.remove();
    count_field--;
  } else if(parent_class.hasClass('saved')) {
    parent_class.removeClass('saved').addClass('remove');
  }
  $('#count_field').val(count_field);
});

This code is inside the click function on the add button right after I append the new field.

Can someone help me?

Just to make it clear that the address field that comes in the html is working correctly, just leave the button red. The problem is in the field added later, by the add button.

Answer:

See if this works.

$('#remove_input').click(function() {
    var count_field = $('#count_field').val();
    var parent_class = $(this).parents('tr');
    if (parent_class.hasClass('pending')) {
    parent_class.remove();
    count_field--;
    } else if(parent_class.hasClass('saved')) {
    parent_class.removeClass('saved').addClass('remove');
    }
    $('#count_field').val(count_field);
});

Use firebug to see if it is passing or if it is generating an error.

Scroll to Top