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

I know this question was asked several times, but couldn't get the answer that works for me so here I am with my case. I'm trying to make a jQuery plug-in that's add contact form to a certain page(It's not like there is no such a plug-ins but let's say I do this just for educational reasons). It is searching for <div id="add_contacts"></div> and creates the form in this div. jQuery

我知道这个问题被问了好几次，但是我没有得到对我有用的答案，所以我在这里提出我的问题。我正在尝试创建一个jQuery插件，它将联系人表单添加到某个页面(它不像没有这样的插件，但是假设我这样做只是出于教育的原因)。它正在搜索

并在这个div. jQuery中创建表单

$(document).ready(function(){
    $('#add_contacts').append('<div class="contact-from"></div>');
    $('<form></form>',{id:'new_contact'}).appendTo('.contact-form');
    $('<div>',{class:'contact_user_name'}).appendTo('#new_contact');

var name_field = $('<input>',{
    name:"contact_broker_fullname",
    id:"contact_user_name",
}).appendTo('.contact_user_name');

    var input_button = $('<input>',{
    name:"submit",
    type:"submit",
    value:"Send"
}).appendTo('#new_contact');

    var full_name=name_filed.val();//I'm not sure that this should be here at all.

    input_button.on('click',function(){
    ajax_send_contact(full_name);
    return false;
});
});

And here is the ajax_send_contact(full_name) function:

这里是ajax_send_contact(full_name)函数:

$.ajax({
    url:'../some.php',
    type:'post',
    data:{name:full_name},
    success: function (response){
        if (response) {
            $('#success').append('<span>All right.</span>');
        }
        else{
            $('#errors').append('<span>Something went wrong.</span>');
        }
    },
    error: function () {
        $('#errors').append('<span>ERROR!</span>');
    }
});

I've read that when adding dynamically element to HTML they're not included into the DOM, so how can i operate with them. How i can get the value of the input so once the user click the Submit button the value is sent to ajax function. And I'm not asking only for this particular case but for the whole logic as I'm missing something quite important.

我读过，当向HTML添加动态元素时，它们不包含在DOM中，所以我如何使用它们进行操作。如何获得输入的值，因此一旦用户单击Submit按钮，该值将被发送到ajax函数。我并不是只要求这个特例而是要求整个逻辑因为我漏掉了一些非常重要的东西。

Thank you.

谢谢你！

2 个解决方案

#1

I don't know where you read this but it's not true. Adding elements to your page is DOM manipulation. In fact there is a lot of DOM manipulation in your ready function. DOM manipulations are costly, try to reduce them by grouping operations :

我不知道你读到哪儿了，但这不是真的。在页面中添加元素是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.

There are errors in your code :

您的代码中有错误:

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

And then :

然后:

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

'contact-from' then 'contact-form'. 'name_field' then 'name_filed'.

“联系”然后“联系人表单”。“name_field”然后“name_filed”。

In your code, you get the value of your input#contact_user_name right after you created the form, that is to say before the user had any chance to input something in it. You have to do this in your click handler.

在您的代码中，在创建表单之后，您将获得输入#contact_user_name的值，也就是说，在用户有机会输入内容之前。您必须在单击处理程序中执行此操作。

#2

Pretty simple, set the data with the value of the field right before firing the request:

非常简单，在发出请求之前，用字段的值设置数据:

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

And you can remove var full_name=name_filed.val(), it would only get the value the field had at the moment it was created, and apparently that variable wouldn't be in scope when you actually need it.

您可以删除var full_name=name_file .val()，它只会获得字段在创建时的值，显然，当您实际需要该变量时，该变量不在作用域中。

The rest of your code looks okay.

剩下的代码看起来还可以。

#1

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.