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.

Felix Kling · Accepted Answer · 2013-06-09 23:03:49Z

2

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.

answered Jun 9, 2013 at 23:03

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Anderson Over a year ago

Oh this is badass. I had no idea you could define on events like that. Thanks.

Collectives™ on Stack Overflow

Create element with onInput event defined using jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related