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'); 
});