It doesn't work on dynamically created rows

[ghost]

Hey there, so I can't seem to submit or type inside the rows that are dynamically created.

https://jsfiddle.net/Lsact1tv/

I've already searched and found other topics about that, but they didn't help me. Any suggestions? Thank you! :)

[Mottie]

Hi @exyoris!

Currently, the keyboard needs to be bound to an element directly, no delegated binding, as more than one keyboard is permitted to be open at a time and each may have a different layout.

I ended up modifying a few things in the demo to get things working - updated demo

• Combined two document ready functions into one.
• Separated out the keyboard settings so they can be used when initializing keyboards in the new row.
• Changed .clone(true) to .clone() so the event bindings and data are not copied over into the new row.
• Initialize the keyboard on all new inputs.
• Added a "keyboard-wrapper" element in the HTML to allow positioning the keyboard.
• Switched the demo to use jQuery v3.1.1 and jQuery UI v1.12.1.

$(function() {

  var settings = {
    usePreview: false,
    position: {
      of: '#keyboard-wrapper',
      my: 'center top',
      at2: 'center bottom',
      offset: '0 20'
    }
  };

  $('.keyboard').keyboard(settings);

  var id = 0;
  jQuery("#addrow").click(function() {
    id++;
    var row = jQuery('.samplerow tr').clone();
    row.find("input:text").val("");
    row.attr('id', id);
    row.appendTo('#dynamicTable1');
    row.find('.keyboard').keyboard(settings);
    return false;
  });

  $('.remove').on("click", function() {
    $(this).parents("tr").remove();
  });
});

[ghost]

Thank you, Mottie! This did the trick. :)

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.