Question

我在其他3个页面上使用了datepicker函数，但一切都很好，但现在我正在尝试将它添加到基于ajax函数调用showbookings生成的页面中。目前有8个点击功能在加载动态内容后重新附加，但我无法让日期选择器工作，显示，没有。那么如何获取$（document）.ready（函数并将其置于ajax调用中？我的输入类=“datepicker1”

function showbookings(str, pass) {
    if (str === "") {
        document.getElementById("txtBookings").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtBookings").innerHTML = xmlhttp.responseText;

        *********

        }
    };

    xmlhttp.open("GET", "page1.php?q=" + str, true);
    xmlhttp.send();
}





$(document).ready(function () {
    $(".datepicker1").datepicker({
        showOn: 'both',
        buttonImage: 'images/calendar.gif',
        buttonText: 'Pick Date',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showAnim: 'slideDown',
        duration: 'fast',
        onClose: function (text, inst) {
            $(this).focus();
        }
    });
});

Answer 1

那么如何获取$（document）.ready（函数并将其置于ajax调用中？

你没有。在这种情况下，这将毫无意义。如果在AJAX调用之后ready事件没有再次为document触发，它甚至可能不会做任何事情。由于所有代码都将事件处理程序附加到该事件，因此在事件触发之前，它实际上并不执行处理程序中的代码。

听起来像实际想要做的是在AJAX调用之后初始化添加到DOM的元素上的日期选择器插件。您可以通过再次调用插件初始化程序来完成此操作：

$(".datepicker1").datepicker({
    showOn: 'both',
    buttonImage: 'images/calendar.gif',
    buttonText: 'Pick Date',
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    onClose: function (text, inst) {
        $(this).focus();
    }
});

请注意，这将匹配DOM中的所有 '.datepicker'元素。包括之前初始化的那些。如果这会导致先前初始化的元素出现不良行为，那么只需将插件的选择器限制为仅包含新元素。从代码的外观来看，可能是这样的：

$("#txtBookings .datepicker1").datepicker({
    showOn: 'both',
    buttonImage: 'images/calendar.gif',
    buttonText: 'Pick Date',
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    onClose: function (text, inst) {
        $(this).focus();
    }
});

基本上你只需要调整选择器来只指定添加的元素，这些元素可能有一些共同的父元素。

Answer 2

由于您使用的是jQuery，最好还使用它来处理AJAX：

function showbookings(str, pass) {
    if (str === "") {
        $("#txtBookings").html("");
        return;
    }
    $.get(page1.php?q=" + str);
}

如何在ajax函数中放置文档就绪函数

2 个答案: