php - jQuery .on 事件触发器对于两种表单的工作方式不同？

Question

我之前问过这个问题的第一部分，但没有答案。我设法将一个事件绑定(bind)到表单，但对于其中一个表单似乎没有任何作用。

所以，这是我在 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' 事件，它不会将我发送到另一个页面，这将是表单的操作，它由附加到的 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)它只是一个数字，与我的问题无关。

这是我尝试绑定(bind)的 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

尝试

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


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