Works with vanilla javascript but not jquery

Question

I'm trying to attach VKI (see http://www.greywyvern.com/code/javascript/keyboard ) to an element that's being dynamically added to the DOM via Javascript.

Essentially, it's a table with only one row to begin with and there's "Add Row" and "Delete Row". It gets tricky because each row has an input that needs VKI attached to it.

Below is just a snippet of my otherwise larger code to handle adding and deleting row.

$('#add-passenger-row').click(function(){
    get_lastID();
    $('#passenger-information tbody').append(newRow);


    // this doesn't work --- throws "Uncaught TypeError: undefined is not a function" 
    var myInput = $(newRow).find('#myInput');
    VKI_attach(myInput);

    // this works
    var myInput = document.getElementById('myInput');
    VKI_attach(myInput);

});

My question is... how can I make this work? ie attach VKI to each input in the row that's added dynamically when a user clicks "Add Row"

I can create JSBin if question is not clear enough.

Answer 1

Try:

var myInput = $(newRow).find('#myInput').get(0);
VKI_attach(myInput);

.get() retrieves the DOM element from a jQuery object. VKI is not a jQuery widget, so it doesn't work with jQuery objects, it expects raw DOM elements.

Answer 2

I think d-bro82 and ZiNNED are both right, but try var myInput = $('#myInput')[0]; Since VNK_attach only accepts a dom element, the [0] should remove the jQuery wrapper

Answer 3

Try

var myInput = $('#myInput');

Good luck

Answer 4

The reason the jQuery variant isn't working is because $(newRow).find('#myInput') is not the same as document.getElementById('myInput') . See this SO question . Apparently VKI_attach only accepts a DOM-element and not a jQuery wrapper element.