如何使用on（）通过Jquery向动态添加的div中添加日期选择器

Question

I am adding a div to a form that I am creating. 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, but that isnt really what I want. The datepicker is added after the first click, but the buttonImage is not being added at all. I need it to work on the first click. 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 I am using:

<table class="table table-hover" data-controller="rank">
  <thead>
    <tr>
      <th colspan="4" align="left"><h2> Boy Scout Rank</h2></th>
    </tr>
    <tr>
      <th>Number</th>
      <th>Requirements</th>
      <th>Completed</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr data-name="one_li">
      <td>1</td>
      <td>
        Req
      </td>
      <td>
        <input class="datepicker"/>
      </td>
    </tr>
  </tbody>
</table>

I dont understand how to handle this. Any help would be great.

Answer 1

Judging by your above code, it doesn't look like you're adding a new <div />

If you're not, you shouldn't need to add an event (click) handler - http://jsfiddle.net/ZNR7P/

You should just be able to do:

$(function() {

    $('.datepicker').datepicker();

});​

Answer 2

$(function(){

    $('.datepicker').datepicker({
        showOn:"button", // or "both" if you want the input to trigger the datepicker too
        buttonImage: "images/calendar.png"
    });

})