Ajaxコール後にJavascriptをリロードしようとしています

Question

jquery Plugin Ratingウィジェットを実装しました。私は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() { ... }) 

異なっbindよりon作品以来、などがありますどのように多くの要素、これはパフォーマンスの低下を導入かもしれませんが、それはあなたが要素を交換する頻度によって異なりますそれはパフォーマンスの向上につながる可能性があります。

Answer 2

あなたはここにドキュメントを読んだとき：（http://api.jquery.com/Ajax_Events/）

AJAXイベントがそれを呼ばれているたびに

は、だから私は何をすべきかは、「.on」機能を使用している「ajaxComplete」と呼ばれるグローバルイベントハンドラをトリガそのイベントを聞き、実行したいコードを実行します。私はちょうど彼らはまだAJAXコールの後に正しく行動を確実にするためにいくつかのフィールドにいくつかのマスクを実行して、私の例では

$(".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呼び出しの両方で行いたいと思っていたので、コードが変更されたときにこれをより効率的に変更したので、上のコードを2回書く必要はありません。

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

これが役に立ちます。