2011-02-04 15 views
1

私のasp.netプロジェクトの共通のjavascriptファイルにこのコードがあります。このjquery関数をもっと簡潔にするにはどうすればよいですか?

jQuery-Lintは、この関数の影響を受けたボタンの1つにマウスを重ねると、「同じセレクタを複数回使用しました。

//turns all the buttons into jqueryUI buttons 
//#mainBody is on the master page, #childBody is on the modal page. 
$("#mainBody button, #mainBody input:submit, #mainBody input:button, #childBody button, #childBody input:submit, #childBody input:button").livequery(function() { 
    $(this).button().each(function (index) { 
          $(this).ajaxStart(function() { 
            $.data(this, "old_button_val", $(this).val()); 
            $.data(this, "old_button_disabled", $(this).button("option", "disabled")); 
            $(this).button("option", "disabled", true).val("Wait..."); 
           }).ajaxStop(function() { 
            $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled")); 
           }).ajaxError(function() { 
            $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled")); 
           }); 
         }); 
}); 

同様の質問がhereと尋ねられました。

+1

ここで '.each'を使用する必要はありません – mVChr

答えて

2
// Might be a good idea now to add a class to these element 
// instead of using a long selector like this 
// Additionally, :button already includes <button> elements 
var selector = "#mainBody input:submit, #mainBody input:button, #childBody input:submit, #childBody input:button"; 

$(selector).livequery(function() { 
    // Store a copy of $(this), which we'll reuse... and reuse... and reuse 
    var t = $(this); 

    // Create the callback function shared berween 
    // ajaxStop and ajaxError 
    function ajaxCallback() { 
     t.button('option', { 
      label: t.data("old_button_val"), 
      disabled: t.data('old_button_disabled') 
     }); 
    } 

    t.button() 
     .ajaxStart(function() { 
      // Use $.fn.data instead of $.data 
      t.data({ 
       // Using 'label' instead of 'val' 
       // because <button> elements do not have 'value's 
       "old_button_val", t.button('option', 'label'), 
       "old_button_disabled": t.button("option", "disabled") 
      }).button('option', { 
       disabled: true, 
       label: 'Wait...' 
      }); 
     }).ajaxStop(ajaxCallback).ajaxError(ajaxCallback); 
    }); 
}); 

免責事項:動作保証されていません。

+0

注:キー/値ペアオブジェクトを.dataに渡すには、jQuery 1.4.3以降を使用する必要があります。それ以外の場合は、このスクリプトで "e is undefined"のようなエラーが表示されることがあります。 –