Month: April 2016

淺談jQuery Event Handler 的 extraParameters 使用時機

最近常常需要使用jQuery來寫一些前端的功能
前陣子終於領悟到了jQuery API Document上寫的extraParameters的使用時機,趕緊記錄一下
其實jQuery API Document寫得滿清楚的

extraParamters是一個選擇性的參數,主要的用途就是傳遞額外參數給event Handler

extraParameters
Additional parameters to pass along to the event handler.

例如,有一個使用情境是使用者選擇完下拉選單會帶入預設的資料,但在修改時則帶入已儲存在DB的資料,如果在這個情況下直接trigger change預設的資料就會把應該顯示的資料蓋掉,這時候extraParameters就派上用場了!

在trigger change event handler的時候使用extraParameters,來傳遞需要顯示的資料(sourceText)

      $('.btn-load').click(function(e){
        var id = $(this).attr('id');
        $language.val(id).trigger('change', {
          sourceText: $(this).parent().parent().find('td')[1].innerHTML
        });
      });
 完整的JS code如下:
    $(function(){
      $language = $('#language');
      $language.change(function(e, o){
        if($(this).val() === ''){
          $('#desc').text('');
          return false;
        }
        
        $desc = $('#desc');
        
        if(typeof o === 'object'){
          if(o.sourceText){
            $desc.text(o.sourceText); 
          }          
        }
        else{          
          $desc.text($(this).find("option:selected").text() + ' is a programming language.');          
        }
        
      });
      $('.btn-load').click(function(e){
        var id = $(this).attr('id');
        $language.val(id).trigger('change', {
          sourceText: $(this).parent().parent().find('td')[1].innerHTML
        });
      });
    });

Demo Code