0

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

    });
}​​
4

2 回答 2

3

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

希望这可以帮助！

于 2013-11-13T19:03:05.863 回答
2

ready()一旦 DOM 被加载，该事件就会被触发；从文档：

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

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

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

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

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

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

于 2012-04-15T18:26:19.750 回答