我已经实现了一个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);
}
});
});
});
}
答案 0 :(得分:2)
加载DOM后,ready()
事件被触发;来自documentation:
指定在DOM完全加载时要执行的函数。
完成AJAX调用后,不应让RatingWidget()
函数重新绑定ready
事件,而应该让它绑定元素,例如
function RatingWidget() {
$(".rateit").bind( ... )
}
$(document).ready(RatingWidget);
正如@adeneo所提到的,使用jQuery的on()
方法(文档here)允许您锁定与选择器匹配的事件,而不管事件被绑定时存在哪些元素,因此如果添加新的与选择器匹配的元素,事件也将触发它们。这样可以省去你需要重新绑定事件的麻烦,因为你的元素被替换了。例如你可以打电话一次,不要再担心了:
$(".rateit").on("over", function() { ... } )
由于on
与bind
的工作方式不同,这可能会带来性能损失,但这取决于您更换元素的频率,有多少元素等等 - 它可能只是一个绩效提升。
答案 1 :(得分: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");
});
希望这有帮助!