我知道这个问题曾多次被问过,但是无法得到适合我的答案,所以我在这里。
我正在尝试制作一个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函数。而且我不只是要求这个特殊情况,而是因为我错过了一些非常重要的东西。
谢谢。
答案 0 :(得分: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();
'contact-from'然后'contact-form'。 'name_field'然后'name_filed'。
在您的代码中,您在创建表单后立即获得输入#contact_user_name的值, 也就是说,在用户有机会在其中输入内容之前。 您必须在点击处理程序中执行此操作。
答案 1 :(得分:1)
非常简单,在发出请求之前,使用字段的值设置数据:
data: { name: $('.contact_user_name input').val() }
你可以删除var full_name=name_filed.val()
,它只会获得该字段在创建时的值,并且显然该变量在您实际需要时不在范围内。
其余代码看起来没问题。