Q: jquery does not work, when performed ajax request to reload a div I have read many solutions, and I read that I should use the "on" jquery.but it does not work me.
I have a field that normally works the calendar picker. I have a button, when I click on this, a div is recharged and a field with the same id for the calendar picker function added.
But apparently the button is not working. on the calendar picker it does not work either.
I want to have the button and the text field within the div and make the Ajax request to continue operating the calendar picker.
test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <meta http-equiv="X-UA-Compatible" content="IE=8">
            <title>
            </title>  
            <link rel='stylesheet' type='text/css' href='../css/jquery-ui-1.9.2.custom.css'/>   <!--Carga los estilos de jquery-->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript">
                    $(document).ready(function(){

                        $("#generateDiv").click(function() {

                            $.ajax({
                                  type:"POST",
                                  url: "ajax.php"

                            }).done(function(data) {

                                $("#divReloaded").html(data);
                            });

                        })

                        $( "#fecha" ).datepicker({ dateFormat: 'yy-mm-dd' });
                    })
        </script>

        <!--Fin enlaces-->
        </head> 
        <body>
            <div id='divReloaded'>
                <input type='text' id='fecha'>
                <input type='button' id='generateDiv'  value='button' >

            </div>
        </body>
</html>

ajax.php
<?php
 echo "not works jquery :(<br>";
 echo "<input type='text' id='fecha'>";
 echo "<input type='button' id='generateDiv' value='button' >;"
?>


A: Following discussion in comments, see below answer:
$(document).ready(function(){

    // Adopted event delegation to make sure dynamically added elements are bound to
    $("#divReloaded").on('click', '#generateDiv', function() {

        $.ajax({
              type:"POST",
              url: "ajax.php"

        }).done(function(data) {

            $("#divReloaded").html(data);

            // Moved this inside the done() function so datepicker is re-applied
            $("#divReloaded").find("#fecha").datepicker({ dateFormat: 'yy-mm-dd' });
        });
    });

});


A: fetcha does not exist at the time the DOM loads so it has no listener assigned.
You might want to try using an observer to watch for DOM changes, and then add a click handler to the #fetcha ID once it exists.
Learn about the observer pattern here:
https://carldanley.com/js-observer-pattern/

A: You must re-tailor your own code to make this work.
1 - First of all you don't have any style sheet in your header but only jquery-ui-1.9.2.custom.css
2 - Second you are not explaining if the date picker is included in your custom jquery-ui, if not you ust install a plugin for it.
3 - You need to put the javascript which contains the ajax call just before the body tag on the end of the page.. In this way you allow it to found the input by the 'fecha' id;
4 - I also advise you to use bootstrap.css for your style sheet and bootstrap.js.
I don't understand what your ajax.php is doing.
Your code as now is, can not do what you want.
Try first to take the above mentioned steps code your ajax.php and re-post an other question. We are glad to help you but you fist need to help your self. Let us know.
