Question

Lets assume I have several <span class='remove-type'> elements on a page.

In jQuery document.ready even I am calling $('.remove-type').on('click', removeType);

removeType is a locally defined function.

For some reason, a removeType(data) is getting called and executed only on the first click of any .remove-type span. Consequent clicks don’t fire up an function. Is this a correct behavior for jQuery .on event binding?

Additional info: I do remove the container of the item that generates the click event, but other remove-type spans are still there.

Answer 1

You are just setting a click handler with .on() like you are currently using it. The on() function should really look like

$(document).on('click', '.remove-type', function()...