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

How to place a document ready function inside an ajax function

本文关键字：函数 ajax 文档 就绪      更新时间：2023-09-26

我已经在其他 3 个页面上使用了日期选择器函数，并且效果很好，但现在我正在尝试将其添加到基于 ajax 函数调用 showbookings 生成的页面中。 目前有 8 个单击函数在加载动态内容后重新附加，但我无法让日期选择器工作、显示，什么都没有。那么如何获取 $（document）.ready（函数并将其放入 ajax 调用中呢？我有我的输入类 = "日期选择器1"

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

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

你没有。 在这种情况下，这将是毫无意义的。 如果 ready 事件在 AJAX 调用后没有为 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();
    }
});

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

既然你使用的是jQuery，最好也用它来处理AJAX：

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