Javascript 如何使用新创建的元素刷新DOM

我知道这个问题被问了好几次，但都没有找到适合我的答案，所以我就来处理我的问题。 我正在尝试制作一个jQuery插件，将联系人表单添加到某个页面（这并不是说没有这样的插件，但假设我这样做只是出于教育目的）。它正在搜索

，并在此div中创建表单。 jQuery

我已经读到，当向HTML中动态添加元素时，它们不包括在DOM中，因此如何使用它们。如何获取输入值，以便用户单击Submit按钮后，将值发送到ajax函数。我不仅仅是要问这个特殊的案例，而是要问整个逻辑，因为我遗漏了一些非常重要的东西

---

谢谢。

非常简单，在触发请求之前，用字段值设置数据：

data: { name: $('.contact_user_name input').val() }

您可以删除

var full\u name=name\u field.val（）

，它只会获取字段创建时的值，显然，当您实际需要该变量时，该变量不在范围内

---

代码的其余部分看起来不错。

我不知道您在哪里读到的，但这不是真的。 向页面添加元素是DOM操作。 事实上，在ready函数中有很多DOM操作。 DOM操作的成本很高，请尝试通过分组操作来降低成本：

var formHtml = '';

formHtml += '<div class="contact-form">';
    formHtml += '<form id="new_contact">';
        formHtml += '<div class="contact_user_name">';
            formHtml += '<input type="text" name="contact_broker_fullname" id="contact_user_name">';
        formHtml += '</div>';
        formHtml += '<input type="submit" name="submit" value="send">';
    formHtml += '</form>';
formHtml += '</div>';

$('#add_contacts').append(formHtml); // Only 1 DOM manip.

var formHtml=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
formHtml+=''；
$（“#添加_联系人”）。附加（formHtml）；//只有1个DOM manip。

您的代码中有错误：

$('#add_contacts').append('<div class="contact-from"></div>');
...
var name_field = $('<input>',{

$（'add#u contacts'）。追加（''）；
...
变量名称\字段=$（''{

然后：

$('<form></form>',{id:'new_contact'}).appendTo('.contact-form');
...
var full_name=name_filed.val();

$（''，{id:'new_contact'}）.appendTo（'.contact form'）；
...
var full_name=name_filed.val（）；

“联系人来自”然后是“联系人表格”。 “名称字段”然后是“名称字段”

在代码中，您在创建表单后立即获得输入值#contact_user_name， 也就是说，在用户有机会在其中输入内容之前。

---

您必须在单击处理程序中执行此操作。

检查第一个附加中的输入错误：

div class=“联系人自”

应该是

联系人表单

。您对全名的分配也包含一个键入

字段

，而不是

字段

，但正如您所说，您在这里不需要它。将您对该字段值的访问移到ajax数据对象

名称：$（“#contact_user_name'）。val（）

你说得很对。它成功了。我想我应该花更多的时间在代码的逻辑流程上。谢谢

$('#add_contacts').append('<div class="contact-from"></div>');
...
var name_field = $('<input>',{

$('<form></form>',{id:'new_contact'}).appendTo('.contact-form');
...
var full_name=name_filed.val();