如何将文档准备功能放置在ajax函数中

Question

我在其他3个页面上使用了datepicker函数，并且一切正常，但是现在我试图将其添加到基于ajax函数调用showbookings生成的页面中。 当前有8个单击功能在加载动态内容后将重新连接，但是我无法使datepicker正常工作，显示，什么也没有。 那么，如何使用$（document）.ready（function并将其放入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);
}