【问题标题】：jquery does not work, when performed ajax request to reload a divjquery 不工作，当执行 ajax 请求重新加载一个 div
【发布时间】：2015-12-02 06:52:28
【问题描述】：

我已经阅读了很多解决方案，并且我读到我应该使用“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' >;"
?>

【问题讨论】：

您是否在控制台中看到任何反馈？
尝试使用 on('click', element, callback) 而不是 click(callback)
@AdamJeffers 感谢您的回答。我在控制台中没有错误。
console.log(data) 并在您的完成功能中为我们发布
@bmalets $("#generateDiv").on("click", "#fecha #generateDiv", function() { 按钮不起作用

标签： javascript php jquery css ajax

【解决方案1】：

在 cmets 讨论之后，请参阅以下答案：

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

});

【讨论】：

【解决方案2】：

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

您可能想尝试使用观察者来观察 DOM 更改，然后在 #fetcha ID 存在后添加一个点击处理程序。

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

【讨论】：

它包含在一个 document.ready 调用中，这意味着它应该在第一次出现故障时位于 dom 中。
查看脚本的 ajax.php 部分。在加载页面并且用户单击第一个按钮之前，字段上的 ID 不存在于 dom 中。单击按钮后，没有任何工作，因为在 ajax.php 中定义的元素上没有侦听器。DOM 加载时存在的按钮是页面上唯一分配了侦听器的东西。
@DannyGibas 不确定如何解决。
@DannyGibas 你能帮忙吗？我不明白如何修复我的代码。我需要按钮，日历选择器可以工作。
在没有观察者的情况下，一个简单的方法是在 AJAX 查询中使用回调。 .done(function(data) { $("#divReloaded").html(data); $( "#generateDiv" ).on( "click", function() { do whatever...... }); }); 这样在 AJAX 加载完成后，新的 div 实例就会添加一个监听器。

【解决方案3】：

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

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

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

3 - 您需要将包含 ajax 调用的 javascript 放在页面末尾的 body 标记之前。这样您就可以让它通过 'fecha' id 找到输入；

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

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

你现在的代码不能做你想做的事。

首先尝试按照上述步骤对您的 ajax.php 进行编码，然后重新发布另一个问题。我们很高兴为您提供帮助，但您首先需要帮助自己。让我们知道。

【讨论】：