jquery-ui datepicker not appearing

Question

im trying to do some code with jquery-ui im wondering why it not working

my html code is

<a>open form</a>
<div></div>

my js code is

$(document).ready(function(){
    $("a").click(function(){
        $.ajax({
            url:"data.php",
            success:function(data){
                $("div").html(data);
            }
        });
    });
})
$(function(){
    $("input").on('click', function(){ $(this).datepicker(); });
});

and data.php contain

<input type="text" />

the result is, why the datepicker isn't appearing..?

and another problem is like this code

(document).ready(function(){
    $("a").click(function(){
        $("div").html("<input id='datepicker'><input id='tb_submit' type='submit' value='Submit' />");
    });
})
$(function(){
    $("body").on('click', "input#datepicker",function(){ $(this).datepicker(); });
    $("body").on('click','input#tb_submit',function(){$(this).button();})
});

the button should be clicked, then showed the true button. do you have the solutions??

live code : http://jsfiddle.net/5Ps6P/28/

Answer 1

Try this code:

$(function(){
    $(document).on('click', "input",function(){ $(this).datepicker(); });
});

Use this code:

$(document).ready(function(){
    $("a").click(function(){
        $("div").html("<input id='datepicker'><input id='tb_submit' type='submit' value='Submit' />");
        $("input#datepicker").datepicker();
        $('input#tb_submit').button();
    });
})

You just need initialise it after adding it, and do not need bind click handler yourself.

Here is jsfiddle. http://jsfiddle.net/5Ps6P/30/

Answer 2

Try to change your code to:

Edit:

$(document).ready(function(){
    $("a").click(function(){
        $.ajax({
            url:"data.php",
            success:function(data){
                var newInput = $(data);
                newInput.datepicker();
                $("div").html(newInput);
            }
        });
    });
})

Answer 3

This should work :
$(document).ready(function(){

$("a").click(function(){
    $("div").html("<input id='datepicker' type='text'>");
     $("#datepicker").datepicker();
});



 })

However i would suggest to make the input to be hidden and show it when link is clicked. This would ensure that your event is binded to the input when the DOC is created.

Answer 4

Try using the live() jQuery function to listen to elements inserted after page loads.

// listen to clicks on input elements
$('input').live('click', function() {

  // apply datepicker to this input element
  $(this).datepicker();
});

Attach an event handler for all elements which match the current selector, now and in the future . http://api.jquery.com/live/