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

Question

我知道这个问题被问了好几次，但是找不到对我有用的答案所以我在这里就是我的情况。 我正在尝试制作一个jQuery插件，它将联系表单添加到某个页面（这不是没有这样的插件，但是我只是出于教育原因而这样说）。 它正在搜索<div id="add_contacts"></div>并在此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;
});
});

这是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>');
    }
});

我已经读过，当将动态元素添加到HTML时，它们不包含在DOM中，因此我如何使用它们进行操作。 如何获取输入的值，一旦用户单击“提交”按钮，该值将被发送到ajax函数。 而且我不只是要求这个特殊情况，而是因为我错过了一些非常重要的事情。

谢谢。

Answer 1

我不知道你在哪里读到这个，但事实并非如此。 向页面添加元素是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.

您的代码中存在错误：

$('#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();

'contact-from'然后'contact-form'。 'name_field'然后'name_filed'。

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

Answer 2

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

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

并且你可以删除var full_name=name_filed.val() ，它只会得到字段在创建时的值，并且显然该变量在你实际需要时不在范围内。

其余的代码看起来还不错。