jquery可拖动输入无法检测到keydown /输入任何内容

Question

我正在编写一个可拖动的 html div 为：

它看起来像这样：

但是我不能输入像普通输入 div 这样的东西：<input />。 它不响应任何关键事件。

我已尝试使用stopPropagation 将事件停止给它的父母：

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


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

input 在哪里：

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

和console.log( input ):

但这无济于事。 （而对于后面的 keydown 事件，控制台中不会给出任何输出。）

谁能建议我调试这个问题的方法？它真的让我发疯。谢谢！

PS：使用的是 Chrome。

更新：我找到了问题，但不知道原因。

是因为我把父dom装饰成jquery draggable，需要取消<input class='x-leaf'/>为：

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

用之前的stopPropogation和@Brainfeeder建议的方式，终于奏效了。

Answer 1

因为输入是在 DOM 加载后创建的，所以您最好在页面加载时对 DOM 中存在的父元素调用 .on()。

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