jQuery 没有调用我的函数？答案

【问题标题】：jQuery not calling my function?jQuery 没有调用我的函数？
【发布时间】：2015-05-22 10:58:15
【问题描述】：

我最近开始学习 jquery 来改进我的网站。我想创建一个登录模式对话框，供用户输入他们的凭据...我从以下代码开始：

BootstrapDialog.show({
        size: BootstrapDialog.size_normal,
        title: 'Login',
        message: '\
        <form name="LoginUser" method="POST" action="php/process.php">\
            \
            <div class="input-group">\
                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-user"></i></span>\
                <input name="Username" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">\
            </div><br>\
            \
            <div class="input-group">\
                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-lock"></i></span>\
                <input name="Password" type="password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">\
            </div><br>\
            \
        </form> \
        \
        Forgot your password? Click here!\
        ',

        buttons: 
        [
            {id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: true, action: function() { 
                $('LoginUser').submit(function() {
                    if(window.console) console.log('foo');

                    /*var UserData = {
                        'UserName'      : $('input[name=name]').val(),
                        'PassWord'      : $('input[name=name]').val(),
                    };

                    $.ajax({
                        type        : 'POST', 
                        url         : 'php/process.php', 
                        data        : formData, 
                        dataType    : 'json', 
                        encode      : true
                    })*/
                });
            }},

            {id: 'btn-cancel', icon: 'glyphicon glyphicon-remove', label: 'Cancel', cssClass: 'btn-primary',  autospin: false, action: function(dialogRef){ 
                dialogRef.close(); 

            }}
        ]
    });

该按钮似乎没有调用我放在下面的$('LoginUser').submit(function() 函数.. 我尝试了控制台测试，但即使 console.log 日志似乎也没有任何工作......

编辑：模态对话框是nakupanda's Bootstrap Dialog on GitHub

EDIT2：任何人都可以尝试为我重写它吗？因为我不认为我有任何进展

EDIT3：我已经重写了代码，我唯一的问题是 php 怎么知道它来自 jquery 并且是它应该操作的特定形式？

{id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: false, action: function() { 

                    var formData = { 
                        'UserName' : $('input[name="Username"]').val(), 
                        'PassWord' : $('input[name="Password"]').val() 
                    };

                    $.post('php/process.php', function(formData) {
                        console.log("foo3")
                        $('#LoginUser').submit(function(formData) {
                            console.log("foo")
                        });
                    })

                    /*.done(function(data) {
                        console.log(data)

                        if (!data.success) {
                            alert("Failed!")
                        }
                        else {
                            alert("Success!")
                        }
                    });*/
                    event.preventDefault();
            }},

PHP：

<?php
if(isset($_POST['LoginUser']))
{
    $errors =   Array();
    $data =     Array();

    echo $_POST['Username']; 
    echo $_POST['Password'];

    if(empty($_POST['Username'])) $errors['Username'] = 'Username is required.';
    if(empty($_POST['Password'])) $errors['Password'] = 'Password is required.';

    if(!empty($errors['Username']) && !!empty($errors['Password'])) 
    {   
        $data['success'] = true;
        $data['message'] = 'Success!';
    } 
    else
    {
        $data['success'] = true;
        $data['errors']  = $errors;
    }

    echo json_encode($data);
}

【问题讨论】：

LoginUser 是 id 或 class 如果它是 ID 然后像这样调用 $("#LoginUser").submit(function()) else if it class then $(".LoginUser").submit( function()).check 一次
完成了.. 还是一样
什么是 LoginUser 字段是 ID 或类或标签名称
我正在通过 jquery 呼应表单......它的名字
你能创建小提琴来显示这个问题吗...？

标签： php jquery twitter-bootstrap

【解决方案1】：

如果您尝试使用名称选择器提交表单，您需要遵循下面给出的语法

$("form[name='LoginUser']").submit()

如果您只有一个表格，那么以下将起作用

$("form").submit()

【讨论】：

【解决方案2】：

希望还不算太晚。

尝试替换按钮定义如下：

{id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: true, action: function(dialog) { 
                dialog.getModalBody().find('form').submit(function() {
                  ....

而且您实际上不需要这样编写表单，这样会更好：

message: function(dialog) {
  var $form = $('<form />');
  ...
  
  return $form;
}

您甚至可以将表单引用绑定到对话框实例并稍后使用：

message: function(dialog) {
  var $form = $('<form />');
  ...
  
  // Bind $form to dialog instance
  dialog.setData('myform', $form);
  
  return $form;
},
buttons: [{
  label: 'A button',
  action: function(dialog) {
    var $form = dialog.getData('myform');
    
    $form.submit();
  }
}]

更好的时尚。

【讨论】：