简单的 jQuery 代码不起作用（处理对象）答案

【问题标题】：Simple jQuery code doesn't work (dealing with Objects)简单的 jQuery 代码不起作用（处理对象）
【发布时间】：2014-06-14 19:43:09
【问题描述】：

好的。所以我在很长一段时间后开始编码，我只是去 codecademy 用 javascript 刷新一下。所以我学到了一些我以前不知道的东西：OOP。

帮助。我尝试了一些东西。将包括 JSfiddle。但我不知道为什么，它不起作用。

别管我的白痴，我会在知道上一个代码中的问题后立即完成代码。我有很多事情要做。我也想学PHP制作一种电话簿！我也没有包含 CSS，但这并不重要。代码应该做的是，每次用户填写表单并单击提交时，它都应该将值附加到“#results”div 中。什么都不做。帮助？另外，不要介意两个密码字段。一旦我清楚这个问题，我将编写验证表单的代码。

提前致谢。

JSFIDDLE：http://jsfiddle.net/Ns66V/1/

HTML -->

<html>
<head>
    <link rel="stylesheet" href='style.css'>
    <script type="type/javascript" src='jquery.js'></script>
    <script type="type/javascript" src='js.js'></script>
    <title>Form JS</title>
</head>
<body>
    <div class='container'>
    <h1>Create an ID! It's absolutely <strong>FREE!</strong></H1>
        <div id='form'><form action='get'>
            <input name='fname' type='text' placeholder='First Name'><br>
            <input name='lname' type='text' placeholder='Last Name'><br>
            <input name='email' type='email' placeholder='Email Address'><br>
            <input name='passw' type='password' placeholder='Password'>
            <input name='Again' id='last' type='password' placeholder='Again!'><br>
            <select name='gender'>
                <option value='male'>Male</option>
                <option value='female'>Female</option>
                <option value='other'>Other</option>
            </select>
            <div id='submit'><strong>SUBMIT IT!</strong></div>
        </form>
    </div>
        <div class='results'>
            <div class='vals' id='intro'>
                <div class='srn item'>#</div>
                <div class='bigitem item'>FULL NAME</div>
                <div class='bigitem item'>EMAIL ADDRESS</div>
                <div class='gender item'>Gender</div>
            </div>
            <div class='vals'>
                <div class='srn item'>#</div>
                <div class='bigitem item'>FULL NAME</div>
                <div class='bigitem item'>EMAIL ADDRESS</div>
                <div class='gender item'>Gender</div>
            </div>
        </div>
    </div>
</body>
</html>

JS (JQuery) -->

$(document).ready(function(){
function Person(fname,lname,email,passw,gend){
    this.fname = fname;
    this.lname = lname;
    this.email = email;
    this.passw = passw;
    this.gend = gend;
};
var numPeople = 0; //Setting the number of people var.
$('#submit').click(function(){
    var fname = $('input[name=fname]').val(),       //SETS VALUES OF ALL THE INPUTS
        lname = $('input[name=lname]').val(),       //SETS VALUES OF ALL THE INPUTS
        email = $('input[name=email]').val(),       //SETS VALUES OF ALL THE INPUTS
        passw = $('input[name=passw]').val(),       //SETS VALUES OF ALL THE INPUTS
        gend = $('select[name=gender]').val();      //SETS VALUES OF ALL THE INPUTS
    var People = new Array(); //Definin
    numPeople++;
    People[numPeople] = new Person(fname,lname,email,passw,gend);
    $('.results').append(People[numPeople].fname + People[numPeople].lname + People[numPeople].email + People[numPeople].passw + People[numPeople].gend);
}); //#SUBMIT.CLICK() END
});

【问题讨论】：

你检查过你使用的是点号而不是哈希..看看这个小提琴jsfiddle.net/Ns66V/1
1- 您使用的是“.results”而不是“#results”（id --> #, class --> 。） 2- 您需要关闭标签，例如、、
等

标签： javascript jquery html oop

【解决方案1】：

在这种情况下，并不完全需要 OOP。问题是你需要使用#results，并且你需要关闭你的按钮和其他标签。

HTML

<button id='submit' type='button'><strong>SUBMIT IT!</strong></button>

$('#results').append(...);

这是一个Fiddle 示例，在末尾添加了一个<br />。

get 和 post 也用于表单 method 属性。 action 是表单发送数据的地方。所以你可能想要：

<form method="get"></form>

【讨论】：

div 有一个类 results，而不是一个 id results。 <div class='results'>
哦，我现在明白了。 jsfiddle代码与问题代码不同。

【解决方案2】：

查看http://jsfiddle.net/Ns66V/4/

按钮标签没有关闭，内容被追加到按钮上，

$('#submit').click(function()

应该替换为

$('#submit').on('click', function()

现在看来可以了。

当然，您应该改进附加内容的方式 - 使用 html 标签来分隔每个信息。

【讨论】：

$('#submit').click(function() 和 $('#submit').on('click', function() 是一回事。使用.click 只是一个捷径。
@SpencerWieczorek 你说得对，我对 live 被弃用并从此使用 on 感到困惑。
谢谢，它确实有效。我打算改变我附加信息的方式，但我试图至少首先得到它。谢谢！