Why is the behavior differtent between these two lines?

Why is the behavior differtent between these two lines?

Hello,

I try to learn/understand jQuery and I'm using it for creating a Joomla component.

I have create an event like this, which should react on "keyup" if something is done in text input element:
  1.         jQuery(".filter_field").on("keyup", filter_data);
            //or the next line
            //jQuery(".filter_field").keyup(function(){filter_data()});
I have two text input elements and one select element with the class="filter_field"
The strange thing is, it is only fired the first time if I changed something in the text input element. I do an second change in the input box, nothing happens.

Now I have found this:
  1. jQuery(document).bind('keyup','input', function () {filter_data()})
This is working what I expect how it should work. This is not exact what I want, because this is reacting on every input element if there is something changed.

But why is the first situation only fired one time?

Thanks in advance,

Best Regards,

Nico