在DOM加载时，fetcha不存在，因此没有分配监听器。

Question

我已经阅读了很多解决方案，并且我读到我应该使用“on”jquery。但它不起作用。

我有一个通常适用于日历选择器的字段。我有一个按钮，当我点击它时，div被充电并且添加了日历选择器功能的相同id的字段。但显然按钮不起作用。在日历选择器上它也不起作用。我想在div中使用按钮和文本字段，并使Ajax请求继续操作日历选择器。

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' >;"
?>

Answer 1

在评论中进行讨论后，请参阅以下答案：

$(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' });
        });
    });

});

Answer 2

在DOM加载时，fetcha不存在，因此没有分配监听器。

您可能希望尝试使用观察者来监视DOM更改，然后在#fetcha ID存在后将其添加到#fetcha ID。

在此处了解观察者模式： https://carldanley.com/js-observer-pattern/

Answer 3

您必须重新定制自己的代码才能使其正常工作。

1 - 首先，你的标题中没有任何样式表但只有jquery-ui-1.9.2.custom.css

2 - 其次，您没有解释日期选择器是否包含在您的自定义jquery-ui中，如果不是，您将为其安装插件。

3 - 你需要在页面末尾的body标签之前放置包含ajax调用的javascript。这样你就可以通过＆＃39; fecha＆＃39;来找到输入。 ID;

4 - 我还建议你使用bootstrap.css作为你的样式表和bootstrap.js。

我不明白你的ajax.php正在做什么。

您现在的代码是，无法做您想做的事。

首先尝试采取上述步骤编码您的ajax.php并重新发布其他问题。我们很乐意帮助你，但你需要帮助你自己。请告诉我们。

当执行ajax请求重新加载div时，jquery不起作用

3 个答案:

在DOM加载时，fetcha不存在，因此没有分配监听器。