1

我知道这个问题被问了好几次，但无法得到适合我的答案，所以我在这里处理我的情况。我正在尝试制作一个将联系表单添加到某个页面的 jQuery 插件（这不像没有这样的插件，但假设我这样做只是出于教育原因）。它正在此 div 中搜索<div id="add_contacts"></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 函数。而且我不仅要针对这种特殊情况，而且要针对整个逻辑，因为我遗漏了一些非常重要的东西。

谢谢你。

4

2 回答 2

2

我不知道你在哪里读到这个，但这不是真的。向页面添加元素是 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();

“联系方式”然后是“联系方式”。'name_field' 然后是 'name_filed'。

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

于 2013-09-01T16:45:00.373 回答
1

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

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

而且您可以 remove var full_name=name_filed.val()，它只会获取该字段在创建时所具有的值，并且显然当您实际需要它时该变量不会在范围内。

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

于 2013-09-01T16:21:52.623 回答