如何獲得在一系列事件中發起事件的元素？

Question

居然會有兩個問題，

的方案是

的形式包含三個提交按鈕，當我點擊這些按鈕提交事件中的一個被觸發，那麼第一個事件是click但我沒有捕獲這個。第二個事件是表單的submit這是我正在捕獲的那個。

的代碼是

$('#search-main a').on('click', function(e){ 
    e.preventDefault(); 
    $('#search-advanced').remove(); 
    var target = $(this).attr('href'); 
    var res = $.get(target, function(data){ 
     $('body').append($(data).find('#search-advanced')); 
     $('#search-advanced').addClass('row reveal-modal'); 
     $('#search-advanced') 
     .css('top', 80) 
     .css('border-radius' , '5px') 
     .css('padding-left' , '0px') 
     .css('padding-right' , '0px'); 

     $('#search-advanced').on('submit', 'form' ,function(e){ 
      var params = $('#search-advanced form').serialize(); 

      console.log(e); 
      console.log(params); 
      $.get(target, params, function(data){ 
       $('#search-advanced form').html($(data).find('#search-advanced form').html()); 
       $('#search-advanced input[name="select_filter"]').remove(); 
      }); 
      return false; 
     }); 

     $('#search-advanced input[name="select_filter"]').remove(); 
     $('#search-advanced').on('change', '#categoryDropdown', function(){ 
      $('#search-advanced form').trigger('submit'); 
     }); 

     $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>'); 
     $('#search-advanced').reveal({ 
      animation: 'fade', 
      closeOnBackgroundClick: false 
     }); 
    }); 
}); 

由於jQuery的文檔說

只有 「成功控制」 被序列化到字符串。沒有提交因爲形式是不使用 按鈕

我無法用serialize()

問題一拿到按鈕值提交 按鈕值序列是

如何獲取啓動提交的按鈕屬性？

我以不同的方式接近作爲此解決方案，這是

• 首先捕獲點擊事件
• 獲取屬性
• 傳遞的屬性作爲事件的額外參數

修改後的代碼是

$('#search-advanced').on('submit', 'form' ,function(e){ 
    var params = $('#search-advanced form').serialize(); 

    console.log(e.data); 
    console.log(params); 
    $.get(target, params, function(data){ 
     $('#search-advanced form').html($(data).find('#search-advanced form').html()); 
     $('#search-advanced input[name="select_filter"]').remove(); 

     if(typeof $('input[name="one_more"]') !== 'undefined'){ 
      var oldOneButton = $('input[name="one_more"]'); 
      var newOneButton = oldOneButton.clone(); 
      newOneButton.attr('type', 'button'); 
      newOneButton.insertBefore(oldOneButton); 
      oldOneButton.remove(); 
     } 

     if(typeof $('input[name="remove_filter"]').attr('name') !== 'undefined'){ 
      var oldRemoveButton = $('input[name="remove_filter"]'); 
      var newRemoveButton = oldRemoveButton.clone(); 
      newRemoveButton.attr('type', 'button'); 
      newRemoveButton.insertBefore(oldRemoveButton); 
      oldRemoveButton.remove(); 
     } 
    }); 
    return false; 
}); 

$('#search-advanced input[name="select_filter"]').remove(); 
$('#search-advanced').on('change', '#categoryDropdown', function(){ 
    $('#search-advanced form').trigger('submit'); 
}); 

$('#search-advanced').on('click', 'input[name="one_more"]', function(){ 
    console.log($(this).attr('name')); 
    var name = $(this).attr('name'); 
    var value = $(this).attr('value'); 
    $('#search-advanced form').trigger('submit', {name:value}); 
}); 

我改變了type屬性，因爲它觸發了兩次提交。

問題是console.log(e.data);打印undefined而不是傳遞的對象。

第二個問題是

爲什麼e.data是undefined？

任何建議將不勝感激。

Answer 1

要拍攝按鈕，fiddle

$("#frm").on("click","button",function(){ 
     alert(this.id); 

    }).on("submit",function(e){ 
     console.log("submit"); 
     return false; 
    });​ 

Answer 2

工作解決方案，包含了這兩個問題

$('#search-main a').on('click', function(e){ 
    e.preventDefault(); 
    $('#search-advanced').remove(); 
    var target = $(this).attr('href'); 
    var res = $.get(target, function(data){ 
     $('body').append($(data).find('#search-advanced')); 
     $('#search-advanced').addClass('row reveal-modal'); 
     $('#search-advanced') 
     .css('top', 80) 
     .css('border-radius' , '5px') 
     .css('padding-left' , '0px') 
     .css('padding-right' , '0px'); 

     var clickedButtonName; 
     var clickedButtonVal; 
     $('#search-advanced input[name="select_filter"]').remove(); 
     $('#search-advanced').on('change','#categoryDropdown', function(){ 
      $('#search-advanced form').trigger('submit', {'select_filter':'Select Filter'}); 
     }).on('click', 'input.button', function(){ 
      clickedButtonName = $(this).attr('name'); 
      clickedButtonVal = $(this).attr('value'); 
     }).on('submit', 'form' ,function(e, attr){ 
      var params = $('#search-advanced form').serialize(); 

      if(typeof attr !== 'undefined'){ 
       var key = Object.keys(attr); 
       params += '&' 
       + key[0] 
       + '=' 
       + attr[key[0]]; 
      } 

      if(typeof clickedButtonName !== 'undefined' && typeof clickedButtonVal !== 'undefined'){ 
       params += '&' 
       + clickedButtonName 
       + '=' 
       + clickedButtonVal; 
      } 
      $.get(target, params, function(data){ 
       $('#search-advanced form').html($(data).find('#search-advanced form').html()); 
       $('#search-advanced input[name="select_filter"]').remove(); 
      }); 
      return false; 
     }); 

     $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>'); 
     $('#search-advanced').reveal({ 
      animation: 'fade', 
      closeOnBackgroundClick: false 
     }); 
    }); 
});