Question

I am using a Jquery plugin to switch panel. After I switch panels I need to add a datepicker to an input, but I need to attach the plugin after the panel is added. I want to do this with the on() function, but I cannot seem to make it work. From what I understand you have to use an event, but is there a way to make an event out of a div being added. The code that I have been trying is with a “click” event, this adds the datepicker with the first click and then it will work on the second click. I need it to work on the first click. Also it is not adding the icon like I need. Here is the code that I am using right now:

  $('#switcher-panel').on('click', 'table tr td input', function(){
    $('.datepicker').datepicker({
      buttonImage: "images/calendar.png"
    });
  });

Here is the html that is switching the panels:

<a id="content1" class="switcher">Rank 1</a>
<a id="content2" class="switcher">Rank 2</a>

<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>

<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show">
</div>

How would I use the on function to make this work.

Answer 1

on() is not capable of running a plugin like datepicker. You need to call the plugin after you insert the new html.

Something along th lines of this simple append:

$('#someDiv').append('<input class="datpicker"/>').find('.datepicker').datepicker();