Question

我正在尝试创建一个前端编辑器，我正在使用AJAX调用将数据转换为新的div，如下所示：

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);
        }
    });
}

一切都很好'直到这里。新div显示数据到位，一切看起来都应该如此，但随后出现问题！

我正在尝试使用jEditable插件来编辑新创建的数据，但是当文档加载时，新创建的div不在那里，我做了一个.live事件，如下所示：

$("#editor").live('mouseenter', function(){
    $('.edt').editable(function(){
        console.log($(this).val());
    });
    $('.edtta').editable(function(){
        console.log($(this).val());
    }, {
        type: 'textarea'
    });
});

现在，问题如下：

当我点击插件启动的.edt元素时，会创建一个新的input并在其中显示原始文本，但由于.edt元素是新的，当我尝试时在控制台中发布它显示为<h1 class="edt">的jEditable数据。 <h1 class="edt">当然是jEditable创建的输入字段的父级。

有人能指出我如何获取我在jEditable输入字段中输入的数据的正确方向吗？

非常感谢！

Answer 1

如果我没有误解您的问题，您是否在提交之前尝试获取输入数据？如果是这样，请使用onsubmit方法：

      $('.edt').editable('@Url.Action('Edit', 'Home')', 
      {
        onsubmit: function (settings, data) {
            var input = $(data).find('input');
            var original = input.val();

            alert(original);
        }
      }

您需要使用.find（）来获取输入，然后才能通过.val（）获取值希望这有帮助：）

jQuery - 使用jEditable编辑新创建的div无法正常工作

1 个答案: