我正在学习使用 jquery 并正在制作一些测试页面进行练习。
对于此示例,我使用 jquery 将函数“showAddToDb()”绑定(bind)到按钮。当按下该按钮时,jquery 应该将以下 html 表单代码附加到由 id“memberContent”标记的 div 中(我在这里省略了)。
$(document).ready(function() {
$('#addToDb').bind('click',showAddToDb);
});
function showAddToDb() {
var form = $("<div></div>");
var formName = "<div class=\"formRow\"><label for=\"name\">Name: </label><input class=\"nameInput\" type=\"text\" name=\"name\"/></div>";
var formLocation = "<div class=\"formRow\"><label for=\"location\">Location: </label><input class=\"locationInput\" type=\"text\" name=\"location\"/></div>";
var formDes = "<div class=\"formRow\"><label for=\"description\">Description: </label><textarea class=\"descriptionInput\" name=\"description\" rows=\"10\" maxlength=\"1000\"></textarea></div>";
var formPrice = "<div class=\"formRow\"><label for=\"price\">Price: </label><input class=\"priceInput\" type=\"text\" name=\"price\"/></div>";
var formSubmit = "<div class=\"formRow\"><button onclick=\"addToDb()\">Submit</button></div>";
form.append(formName);
form.append(formLocation);
form.append(formDes);
form.append(formPrice);
form.append(formSubmit);
$('#memberContent').append(form);
}
上面的代码可以工作,但我很难让它工作,我的问题是它为什么工作。为了让它工作,我必须将函数的第一行从 var form = "<div></div>";
更改为至var form = $("<div></div>");
我知道美元符号代表 jquery 调用,但我不确定为什么在这种特殊情况下需要它。另外,我是否也应该用 $()
包装所有其他变量?用于追加?它按原样工作,但我在网上看到了一些这样做的例子,但没有解释原因。
最佳答案
如果您不将该字符串传递给 jQuery,那么它只是一个字符串。请注意,稍后您将使用“form”变量,就好像它是一个 jQuery 对象一样:
form.append(formName);
所以最好是一个!您还可以引入一个新变量:
var $form = $(form); // assuming "form" was a plain string
然后:
$form.append(formName);
// etc, with "$form" instead of "form"
有些人喜欢通过给变量命名以“$”开头来标记保存 jQuery 对象的变量。这是个人喜好问题。
您不必包装其他字符串,因为它们被直接移交给 jQuery API。该代码将知道如何处理它们。但是,如果您确实将它们包装为 jQuery 对象,那么这也会起作用,同样是因为 jQuery 只会做正确的事情。
关于javascript - jQuery append() html 语法行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17640156/