jquery draggable input cannot detect keydown / input anything

Question

I am writing a draggable html div as:

And it looks like this:

But I cannot input anything like a normal input div as: <input />. It does not response for any key events.

I have tried to use stopPropagation to stop the event to its parents as:

    input.onclick = function ( evt ) {
        evt.stopPropagation();
        console.log( 'input got clicked' );
    };


    $( input ).on( 'keydown', function ( evt ) {
        evt.stopPropagation();
        console.log( 'input got keydown' );
    } );

where the input is:

    let input = document.createElement( 'input' );
    input.setAttribute( 'type', 'text' );

and with console.log( input ):

but it does not help. (And for the later keydown event, no output is given in the console.)

Can anyone suggest me a way to debug this problem? It really drives me crazy. Thanks!

PS: Chrome is used.

Update: I find the problem, but do not know the reason.

It is because I decorate the parent dom as jquery draggable, and I need to cancel the <input class='x-leaf'/> as:

    $('#input-parent').draggable({
        containment: 'window',
        cancel: '.x-leaf'
    });

With the previous stopPropogation and the way suggested by @Brainfeeder, it finally works.

show us how you have defined input in $( input ) looks like. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jan 24, 2018 at 13:46
@Cruiser correct, unless he has defined input as a variable, and if he has, it should still be done in another way — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jan 24, 2018 at 13:48
Thanks for the reply. input is a variable, and I have edited it in the question. — Zhenjie Zhao
– Zhenjie Zhao, Commented Jan 24, 2018 at 13:51

Brainfeeder · Accepted Answer · 2018-01-24 14:29:01Z

1

Because input is created after DOM loading you better call .on() on a parent element that exists in DOM on page load.

$('#someParentEl').on( 'keydown', '.x-node input', function ( evt ) {
    console.log( 'input got keydown' );
} );

edited Jan 24, 2018 at 14:29

answered Jan 24, 2018 at 13:55

Brainfeeder

2,6322 gold badges21 silver badges37 bronze badges

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

7 Comments

Brainfeeder Over a year ago

try changing $(input) to .x-node input or some selector matching the input instead of the object.

Zhenjie Zhao Over a year ago

` $( document ).on( 'keydown', $( '.x-node input' ), function ( evt ) { evt.stopPropagation(); console.log( 'input got keydown' ); } );`

Zhenjie Zhao Over a year ago

Thanks for your patience. I have detected the event with the above code. But I still cannot input anything.

Zhenjie Zhao Over a year ago

The real weird thing is that, once I add this input.classList.add('x-connection');, then it works, even with my previous buggy code.

Zhenjie Zhao Over a year ago

.x-connection{ 	position:absolute; 	border:solid 1px #dedede; 	background-color:#2e2e2e; 	width:0.5em; 	height:0.5em; 	border-radius:0.5em; }

|

Collectives™ on Stack Overflow

jquery draggable input cannot detect keydown / input anything

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related