Question

我已经实现了一个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);
                }
            });
        });

    });
}

Answer 1

加载DOM后，ready()事件被触发;来自documentation：

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

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

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

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

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

由于on与bind的工作方式不同，这可能会带来性能损失，但这取决于您更换元素的频率，有多少元素等等 - 它可能只是一个绩效提升。

Answer 2

当您阅读此处的文档时：（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");
});

希望这有帮助！

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

2 个答案: