我已经查过并尝试了,但是没有用。如果用户在输入字段中提交了a
,那么它应该提醒it works
,但是由于某种原因它不起作用。
我在做什么错,我该如何解决?
$(function() {
var $list, $newItemForm;
$list = $('ul');
$newItemForm = $("newItemForm");
$newItemForm.on('submit', function(e) {
e.preventDefault();
// var text = $('input:text').val();
var text = $('itemField').val();
console.log(text);
$list.append('<li>' + text + '</li>');
// $('input:text').val('');
if (text == "a") {
alert("it works");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
<input type="text" id="itemField" placeholder="item" />
<input type="submit" id="add" value="add" />
</form>
答案 0 :(得分:1)
在引用格式(#
)和变量中的输入值($("newItemForm")
)时,您忘记了选择器中的$('itemField').val()
前缀:
$(function() {
var $list, $newItemForm;
$list = $('ul');
$newItemForm = $("#newItemForm");
$newItemForm.on('submit', function (e) {
e.preventDefault();
// var text = $('input:text').val();
var text = $('#itemField').val();
console.log(text);
$list.append('<li>' + text + '</li>');
// $('input:text').val('');
if(text == "a") {
alert("it works");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
<input type="text" id="itemField" placeholder="item"/>
<input type="submit" id="add" value="add"/>
</form>
答案 1 :(得分:0)
我认为问题出在“ newItemForm”和“ itemField”的选择器上。
在jQuery中,当您想按ID选择元素时,需要在#字符前加上
。代码应如下:
$(function() {
var $list, $newItemForm;
$list = $('ul');
$newItemForm = $("#newItemForm"); // Remember to use # to select by ID.
$newItemForm.on('submit', function (e) {
e.preventDefault();
// Get value from item field.
var text = $('#itemField').val(); // Use # here as well.
// Clear the item field.
$('#itemField').val('');
console.log(text);
$list.append('<li>' + text + '</li>');
if(text == "a") {
alert("it works");
}
});
});
如果您不使用#,则jQuery会期望以下元素类型,例如ul或span等。如果要按班级选择,则需要在前面加一个。在类名前面,例如“ .classname”。
我希望这会有所帮助。