0

我已经在其他 3 个页面上使用了 datepicker 函数并且一切都很好，但是现在我试图将它添加到基于 ajax 函数调用 showbookings 生成的页面中。目前有 8 个点击功能在加载动态内容后被重新附加，但我无法让日期选择器工作，显示，什么都没有。那么如何获取 $(document).ready(function 并将其放入 ajax 调用中？我有我的输入 class = "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();
        }
    });
});
4

2 回答 2

1

那么如何获取 $(document).ready(function 并将其放入 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();
    }
});

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

于 2013-10-30T18:51:34.720 回答
0

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

function showbookings(str, pass) {
    if (str === "") {
        $("#txtBookings").html("");
        return;
    }
    $.get(page1.php?q=" + str);
}
于 2013-10-30T18:51:37.487 回答