尝试在 Ajax 调用后重新加载 Javascript

Trying to Reload Javascript after Ajax call

本文关键字：加载 Javascript 新加载 Ajax 调用      更新时间：2023-09-26

我已经实现了一个jquery插件评级小部件。它工作得很好，直到我发出 ajax 调用来获取数据。 我需要插件添加到新元素中。

我试图将脚本封装在一个函数中，并在成功时再次调用该函数，但没有运气。

如果没有成功，我也无法调用该函数，因此这是我的主要问题。

我将如何将其转换为函数并在页面加载和 ajax 调用时调用它。 正如你在下面看到的，我试着包围它。 

function RatingWidget(e) {
    //    jQuery.noConflict();
    $(document).ready(function() {
        //we bind only to the rateit controls within the products div
        //$('#products .rateit').bind('rated reset', function (e) {
        $(".rateit").bind('over', function(event, value) {
            $(this).attr('title', value);
        });
        $(" .rateit").bind('rated reset', function(e) {
            var ri = $(this);
            // var msg = ri.next();
            // var msg = ri.next('div .ratemsg');
            var msg = $(this).parents().nextAll("div.ratemsg:first")

            //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
            var value = ri.rateit('value');
            //var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
            var ratingid = ri.data('ratingid');
            //   var ratingtest = ri.data('ratingtest');
            var currentTime = new Date()
            var month = currentTime.getMonth() + 1
            var day = currentTime.getDate()
            var year = currentTime.getFullYear()
            var dateoftweet = (month + "/" + day + "/" + year)
            //  var dateoftweetparse = Date.parse(dateoftweet);
            var hours = currentTime.getHours()
            var minutes = currentTime.getMinutes()
            if (minutes < 10) {
                minutes = "0" + minutes
            }
            var timeoftweet = (hours + ":" + minutes + " ")
            //  var timeoftweetparse = Date.parse(timeoftweet);

            //maybe we want to disable voting?
            ri.rateit('readonly', true);
            $.ajax({
                url: '/Home/GetRating',
                //your server side script
                data: {
                    id: ratingid,
                    value: value,
                    tweetday: dateoftweet,
                    tweettime: timeoftweet
                },
                //our data
                type: 'POST',
                success: function(data) {
                    //$('#ratemsg').html(data);
                    msg.html("<B>The TweetId is " + ratingid + " the vote value is " + value + " " + dateoftweet + "  " + timeoftweet + "</b>");
                },
                error: function(jxhr, msg, err) {
                    //  $('#response').append('<li style="color:red">' + msg + '</li>');
                    msg.html(data);
                }
            });
        });
    });
}​​

当您阅读此处的文档时：（http://api.jquery.com/Ajax_Events/）

每次调用 ajax 事件时，它都会触发一个名为"ajaxComplete"的全局事件处理程序

所以我要做的是使用".on"函数来侦听该事件并执行我想运行的任何代码。

我将在下面举一个例子：

$(".date").mask("9999/99/99 99:99:99");
$(".expiredate").mask("99/9999");
$(".phone").mask("(999) 999-9999");
$(document).on("ajaxComplete",function(){
    $(".date").mask("9999/99/99 99:99:99");
    $(".expiredate").mask("99/9999");
    $(".phone").mask("(999) 999-9999");
});

在我的示例中，我只是在某些字段上运行一些掩码，以确保它们在 AJAX 调用后仍然正常运行。 由于我希望在 AJAX 调用和关闭时进行这些调用，因此我将代码更改为此调用以提高效率，因此我不必两次编写上面的代码。

$(document).on("ready ajaxComplete",function(){
    $(".date").mask("9999/99/99 99:99:99");
    $(".expiredate").mask("99/9999");
    $(".phone").mask("(999) 999-9999");
});

希望这有帮助！

加载 DOM 后，ready() 事件就会被触发;从文档中：

指定在 DOM 完全加载时要执行的函数。

与其让RatingWidget()函数在 AJAX 调用完成后重新绑定 ready 事件，不如让它绑定元素，例如

function RatingWidget() {
      $(".rateit").bind( ... )
}
$(document).ready(RatingWidget);

如@adeneo所述，使用 jQuery 的 on() 方法（此处的文档）允许您锁定与选择器匹配的事件，而不管事件绑定时存在哪些元素，因此如果您添加与选择器匹配的新元素，事件也会为它们触发。这将为您省去确定何时需要重新绑定事件的麻烦，因为您的元素已被替换。例如，您可以调用一次，而不必再担心它：

$(".rateit").on("over", function() { ... } )

由于on的工作方式与bind不同，这可能会带来性能损失，但这取决于您替换元素的频率，元素的数量等 - 它可能只是性能提升。

相关文章：