How .on works for $(document)

Question

My JS Code does not work for a modal with a form that is loading from an ajax-call to php side.

I think I have to call the function like the following:

$(document).on('click', '#tags', function ()

How should I change the original code into this, can someone help and explain it to me?

$('#tags').on({  click: function(e) {
	e.preventDefault();
	alert('geklickt');},
	mouseenter: function(e) {
		alert('mouse enter!');
	}
});

Using only the $('#tags') does not work.

Additionally, I have to change this code:

$(document).ready(function() {

    bookIndex = 0;

$('#bookForm')

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');

        // Remove fields
        $('#bookForm')
            .formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
            .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
            .formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));

        // Remove element containing the fields
        $row.remove();
    });
});

Which parts do I have to change so the document.on support is available?

Answer 1

Just pass string selector:

$(document).on({
  click: function(e) {
    e.preventDefault();
    alert('geklickt');
  },
  mouseenter: function(e) {
    alert('mouse enter!');
  }
}, '#tags');