jQuery .on事件触发器在两种形式下的工作方式不同吗？ - php

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

因此，这是我在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，但是它们也不起作用。那么这两个可能是什么问题呢？

参考方案

您的代码是这样的：

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

jQuery Ajax加载仅适用于单个单词变量 - php

在我的PHP文件中，我将一些变量从输入框传递到链接中，该链接通过jQuery的ajax load函数在其URL中使用该变量加载页面。整个系统运行良好，但仅适用于单字变量。每当涉及到空格时，我的Ajax通话都会中断。我假设这是一个编码问题，但是我也有一些疑问。基本上，它归结为我的PHP文件中的这一行代码，这导致了混乱。是否有可能找出格式是否正确，或者为什么在多…

jQuery .ajax将整个JavaScript数组传递给PHP - php

tdata = new Array(); tdata['id'] = "helloid"; tdata['name'] = "helloname"; tdata['location'] = "hellolocation"; tdata[&#…

使用PHP变量将多个参数传递给AJAX JQuery - php

我试图将2个值传递给AJAX JQuery函数。我的函数是由下拉列表的onChange触发的，该列表从数据库获取数据并通过while循环运行，并使用PHP输出，如下所示：$dropDown = "<label for='drop_down_list'>Drop Down: </label> <sel…

如何从php中获取datatables jQuery插件的json数据 - php

我是PHP的新手，正在尝试使用Datatables jQuery插件。我知道我必须从.php文件中获取数据，然后在数据表中使用它，但是我似乎无法通过ajax将其传递给数据表。我设法从数据库中获取数据，并对其进行json编码，但是后来我不知道如何在我的index.php文件中调用它，并在其中显示它。我究竟做错了什么？这是我的代码：HTML（已编辑）： <…

jQuery AJAX不向PHP发送多个提交按钮 - php

所以我的问题是，当我将表单提交到PHP时，使用jQuery通过AJAX提交表单时，使用jQuery AJAX时哪个按钮提交表单并不重要，但是当使用表单操作时，表单会提交并让我知道删除还是删除按下了更新按钮。例如，这是提交表单的HTML<input type="submit" name="update" value…