Link click function is not called

Question

I’ve had a similar problem, and that’s because the function is built before the button is created. Now I made little tertinho after I give an append on my page call a function on click.

That’s my code in the codepen: link

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

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

$('#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 function click on the add button right after I make an append of the new field.

Someone can help me?

Just to make clear the address field that comes already in html this with the correct functioning that is just leave the red button. The problem is in the field added later, by the add button.

Answer 1

See if it 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);
});

User the firebug to see if it is passing or if it is generating error.