Create element with onInput event defined using jQuery?

Question

I'm attempting to create a DOM element using jQuery. I would like to create this DOM element with an 'on input' event defined.

This works:

var headerInput = $('<input/>', {
    'class': 'headerInput',
    type: 'text'
});

headerInput.on('input', function() {
    backgroundManager.get('activePlaylist').set('title', $(this).val());
});

This does not:

var headerInput = $('<input/>', {
    'class': 'headerInput',
    type: 'text',
    input: function(){
        backgroundManager.get('activePlaylist').set('title', $(this).val());
    }
});

I was wondering why? I thought these two syntaxes were identical.

Answer 1

It says:

As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter.

but there is no such jQuery method input . Not for every event does an instance method exist.

You can use the on property as follows though:

var headerInput = $('<input/>', {
    'class': 'headerInput',
    type: 'text',
    on: {
        input: function(){
            backgroundManager.get('activePlaylist').set('title', $(this).val());
        }
    }
});

More info and examples can be found in the documentation .