I can't reach dynamic inputs with javascript

Question

I want to change Cloudera Hue project code but I have some problems. Knockout data-bind is created some html codes with foreach , when I want to reach input in this html, my code does not work correct. My app.mako file code :

.....
 <div data-bind="foreach: submissionVariables" style="margin-bottom: 20px">
  <div class="row-fluid">
    <span data-bind="text: name" class="span3"></span>
    <input type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }" class="span9" />
    <button class="btn fileChooserBtn" data-bind="click: $root.showTimePicker">time</button>
  </div>
</div>

<input type="text" value="2014/03/15 05:06" id="datetimepickerz"/>
....
<script src="/static/js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    $('#dtpickerfolder').datetimepicker()
        .datetimepicker({value:'2015/04/15 05:03',step:10});
    $('#dtpickereverything').datetimepicker()
        .datetimepicker({value:'2015/04/15 05:03',step:10});
    $('#datetimepickerz').datetimepicker()
        .datetimepicker({value:'2015/04/15 05:03',step:10});
</script>

Output:

<input id="dtpickerfolder" class="span9" type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }"></input>
<input id="dtpickereverything" class="span9" type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }"></input>
<input id="datetimepickerz" type="text" value="2014/03/15 05:06"></input>

datetimepickerz input works correct but my dynamic inputs that ids starts with dtpicker are not working.

Can anyone help me ?

Answer 1

I solve this with :

  self.runOrShowSubmissionModal = function runOrShowSubmissionModal() {
var script = self.currentScript();
if (! $.isEmptyObject(script.getParameters())) {
  self.submissionVariables.removeAll();
  $.each(script.getParameters(), function (key, value) {
    self.submissionVariables.push({'name': key, 'value': value});
    // CALL TO JQUERY 
    $("#dtpicker"+key).datetimepicker({value:"2015/04/15 05:03",step:10});
  });
  $("#runScriptBtn").button("reset");
  $("#runScriptBtn").attr("data-loading-text", $("#runScriptBtn").text() + " ...");

  $("#submitModal").modal({
    keyboard: true,
    show: true
  });
} else {
  self.runScript();
}
  };

I sent my jquery in knockout function.