javascript - How to refresh DOM with newly created elements - Stack Overflow

admin管理员组

文章数量:1398775

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

$(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({
    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.

Thank you.

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

$(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({
    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.

Thank you.

• javascript
• jquery
• ajax
• dom

Share Improve this question Follow asked Sep 1, 2013 at 16:14 AleAle 1,05233 gold badges1515 silver badges3636 bronze badges 1

• 1 Check the typo in your first append: div class="contact-from" should be contact-form. Your assignment to full_name also contains a typo filed instead of field, but as you say you don't need this here. Move your access of that field value into the ajax data object name: $('#contact_user_name').val() – Ross Commented Sep 1, 2013 at 16:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 :

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'.

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.

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.

The rest of your code looks okay.

本文标签： javascriptHow to refresh DOM with newly created elementsStack Overflow