jQuery .on事件觸發器對兩種形式的工作方式不同？

Question

我已經問過這個問題的第一部分，但沒有回答。我設法將一個事件綁定到表單，但是其中一個表單似乎沒有任何用處。

所以，這是我在動態的HTML呼應形式之一：

$regex = '/^.*(\d{4,4})_(\d{2,2})_(\d{2,2}).*$/'; 
$replacement = '$3/$2/$1'; 
$val = preg_replace($regex,$replacement,$name);    

$formReplacement = 'backup-$3-$2-$1'; 
$formID = preg_replace($regex,$formReplacement,$name); 

$form = array(
     '<form name="rollback-form" id="' . $formID . '" class="rollback-form" method="post" action="#">', 
      '<fieldset class="rollback-fields">', 
       '<fieldset class="display-rollback-wrapper">', 
        '<label for="display-rollback" class="display-rollback-label">Backup</label>', 
        '<input type="text" name="display-rollback" class="display-rollback" value="' . $val . '" autocomplete="off" readonly="readonly" />', 
        '<input type="hidden" name="rollback_id" value="' . $id . '" />', 
       '</fieldset>', 
       '<fieldset class="rollback-wrapper">', 
        '<button type="submit" name="rollback" class="rollback">Rollback</button>', 
       '</fieldset>', 
      '</fieldset>', 
     '</form>', 
     '<div id="' . $formID . '-message-handling" class="message-handling" class="message-handling"></div>' 
    ); 
$form = implode("", $form); 
echo $form; 

在上述情況下，$name = $id = 'logindb_backup_2012_02_02.sql'。

而且我使用下列的jQuery函數的呼應形式：

$('form.rollback-form').on('click', 'button.rollback',function() { 

    var rollback_id = $(this).find('[name="rollback_id"]').val(); 
    var form_id = $(this).attr('id'); 

    console.log(rollback_id); 
    console.log(form_id); 

    $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
    $.ajax({ 
     type:  'POST', 
     url:  'assets/class/login/actions/rollback.php', 
     dataType: 'json', 
     data: { 
      rollback: rollback_id 
     }, 
     success:function(data) { 
      if(data.error === true) { 
       $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn(); 
       console.log(data.message); 
       setTimeout(function() { 
        $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
       }, 3500); 
      } 
       else { 
        $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn(); 
        console.log(data.message); 
        setTimeout(function() { 
         $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
        }, 3500); 
       } 
     }, 
     error:function(XMLHttpRequest,textStatus,errorThrown) { 
      $('.secondary-actions #'+form_id+'-message-handling').text('Error | Check PHP log for information').fadeIn(); 
      console.log('Error | Check PHP log for information'); 
      setTimeout(function() { 
       $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
      }, 3500); 
     } 
    }); 
    return false; 
}); 

這一個完美的作品，我的意思是'click'事件，它不給我到另一個頁面這將是行動的形式，它由附加到click事件的jQuery處理程序處理。

但上面的問題是：

var rollback_id = $(this).find('[name="rollback_id"]').val(); 
var form_id = $(this).attr('id'); 

console.log(rollback_id); 
console.log(form_id); 

這兩個以上的控制檯undefined輸出，這是爲什麼？它應該是類似於rollback_id = 'backup/logindb_backup_2012_02_02.sql'和form_id = 'backup-02-02-2012'。

而我的問題的第二部分，我在頭上提到它是click事件，它不起作用，就像上面的表單那樣，當我點擊按鈕時，它們中的任何一個發送給我另一個頁面，表單頁面的動作是#。

因此，這裏是另一種形式：

$form = array(
     '<form name="backup-form" class="backup-form" method="post" action="#">', 
      '<fieldset class="backup-fields">', 
       '<fieldset class="display-wrapper">', 
        '<label for="display" class="display-label">Backups</label>', 
        '<input type="text" name="display" class="display" value="' . $this->backups(false,true) . '" autocomplete="off" readonly="readonly" />', 
       '</fieldset>', 
       '<fieldset class="action-wrapper">', 
        '<button type="submit" name="clean" class="clean">Clean All</button>', 
        '<button type="submit" name="create" class="create">Create</button>', 
       '</fieldset>', 
      '</fieldset>', 
     '</form>', 
     '<div class="message-handling" class="message-handling"></div>' 
    ); 
$form = implode("", $form); 
echo $form; 

在形式上面$this->backups(false,true)它只是一個數字，這是不相關的我的問題。

這裏是jQuery的事件觸發我想要綁定：

$('form.backup-form').on('click', 'button.clean',function() { 
    console.log('Clean Button Pressed'); 
}); 


$('form.backup-form').on('click', 'button.create',function() { 
    console.log('Create Button Pressed'); 
}); 

但是這兩個完全不工作。我已經試過.delegate,.click,.submit但這些都不起作用。那麼這兩個問題可能會是什麼？

Answer 1

你的代碼是這樣的：

var rollback_id = $(this).find('[name="rollback_id"]').val(); 
var form_id = $(this).attr('id'); 

現在，什麼是在這種情況下$(this)？它是button.rollback。不是形式。

而是執行此操作：

var form = $(this).closest('form'); 
var rollback_id = form.find('[name="rollback_id"]').val(); 
var form_id = form.attr('id'); 

Answer 2

嘗試

$(document).on('click', 'button.clean',function() { 
    console.log('Clean Button Pressed'); 
}); 


$(document).on('click', 'button.create',function() { 
    console.log('Create Button Pressed'); 
});