jQuery-编辑新创建的div,但表不起作用
我正在尝试创建一个前端编辑器,并使用AJAX调用将数据放入一个新的div中,如下所示:jQuery-编辑新创建的div,但表不起作用,jquery,jeditable,Jquery,Jeditable,我正在尝试创建一个前端编辑器,并使用AJAX调用将数据放入一个新的div中,如下所示: function renderForm(type, position) { $.ajax({ type: 'POST', url: 'renderForm.php', data: "type="+type+"&position="+position, success: function(data){ var
function renderForm(type, position) {
$.ajax({
type: 'POST',
url: 'renderForm.php',
data: "type="+type+"&position="+position,
success: function(data){
var editbutoff = $(editbut).offset();
$(document.createElement('div')).attr('id', 'editor')
.height(($(divpar).height()+20))
.width(($(divpar).width()+20))
.css({position: 'absolute', left: editbutoff.left-($(divpar).width()+20), top: editbutoff.top-20, margin: "5px"})
.append(data)
.fadeIn("slow")
.prependTo(pptest);
}
});
}
$("#editor").live('mouseenter', function(){
$('.edt').editable(function(){
console.log($(this).val());
});
$('.edtta').editable(function(){
console.log($(this).val());
}, {
type: 'textarea'
});
});
在这之前一切都很顺利。新的div显示了数据,所有内容看起来都应该显示,但随后出现了一个问题
我试图使用jEditable插件编辑新创建的数据,但由于加载文档时新创建的div不在那里,因此我制作了一个.live
事件,如下所示:
function renderForm(type, position) {
$.ajax({
type: 'POST',
url: 'renderForm.php',
data: "type="+type+"&position="+position,
success: function(data){
var editbutoff = $(editbut).offset();
$(document.createElement('div')).attr('id', 'editor')
.height(($(divpar).height()+20))
.width(($(divpar).width()+20))
.css({position: 'absolute', left: editbutoff.left-($(divpar).width()+20), top: editbutoff.top-20, margin: "5px"})
.append(data)
.fadeIn("slow")
.prependTo(pptest);
}
});
}
$("#editor").live('mouseenter', function(){
$('.edt').editable(function(){
console.log($(this).val());
});
$('.edtta').editable(function(){
console.log($(this).val());
}, {
type: 'textarea'
});
});
现在,问题是:
当我点击.edt
元素时,插件启动,创建一个新的输入
,并在其中显示原始文本,但由于.edt
元素是新的,当我尝试发布表格数据时,它在控制台中显示为
<代码>当然是表创建的输入字段的父字段
有人能告诉我如何获取我在表格输入字段中实际输入的数据的正确方向吗
非常感谢 如果我没有误解你的问题,你是想在提交之前获得输入的数据吗?如果是,请使用onsubmit方法:
$('.edt').editable('@Url.Action('Edit', 'Home')',
{
onsubmit: function (settings, data) {
var input = $(data).find('input');
var original = input.val();
alert(original);
}
}
您需要使用.find()获取输入,然后才能通过.val()获取值
希望这些帮助:)太棒了!非常感谢你。在提交之前,我估计这个值是相同的,所以我没有费心编写任何其他测试。这就是我没有深入了解插件的原因。:)