Question

My html talbe is as follows

<table width='1200' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Date</td>
    <td>
    <li class='demo'><div class='box'>
          <input type='text' id='from-input' maxlength='10'>
          </div>
          <div class='code-box' style='display:none;'>
          <pre class='code prettyprint'>
$('#from-input').multiDatesPicker();
                            </pre>
                        </div>
                    </li></td>
  </tr>
</table>

And my jquery script is as follows.

   $(document).ready(function(){
        var counter =2;
        $("#addButton2").click(function () {

    var newTextBoxDiv2 = $(document.createElement('div')).attr("id", 'TextBoxDiv2' + counter2);

    newTextBoxDiv2.after().html('<table width='1200' border='0' cellspacing='0' cellpadding='0'><tr><td>Date</td><td><li class='demo'><div class='box'><input type='text' id='from-input'+counter+'' maxlength='10'></div><div class='code-box' style='display:none;'><pre class='code prettyprint'>$('#from-input'+counter+'').multiDatesPicker();</pre></div></li></td></tr></table>');

newTextBoxDiv2.appendTo("#TextBoxesGroup2");
    counter++;
    });

A button <input type='button' value='Add' id='addButton2'> ,When click the button the same copy of the html page is append to a div in the html page. Thera is an input field with id from-input and a jquery function $('#from-input').multiDatesPicker(); in the html page. the id from-input is changed by attatching the counter on each click. The values generated are like from-input2, from-input3, from-input4 and so on. It is the date picker. The date picker is not working inside the appended tables generated onclick. any help will be appreciated.Thank You

Was it helpful?

Solution

First your code is few issues, Any way try this,

JsFiddle Example

$(function() {
   var counter =2;
        $("#addButton2").click(function () {

    var newTextBoxDiv2 = $(document.createElement('div')).attr("id", 'TextBoxDiv2' + counter);

    newTextBoxDiv2.after().html("<table width='1200' border='0' cellspacing='0' cellpadding='0'><tr><td>Date</td><td><li class='demo'><div class='box'><input class='multi' type='text' id='from-input_"+counter+"' maxlength='10'></div><div class='code-box' style='display:none;'>$('#from-input').multiDatesPicker();<pre class='code prettyprint'></pre></div></li></td></tr></table>");

newTextBoxDiv2.appendTo("#TextBoxesGroup2");
            $("#from-input_"+counter).multiDatesPicker();
    counter++;

    });

  });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top