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 呼び出しとオフの両方でこれらの呼び出しが必要だったので、コードをこれに変更してより効率的にし、上記のコードを 2 回記述する必要がないようにしました。

$(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 に答える