jQuery textarea不会更新其值

Question

我的网站上有一些列，这些字段可以通过textarea编辑，如果您要编辑的列具有某些内容，那么旧内容将被放入textarea。 然后在保存按钮上将该文本区域的值存储到变量中，如果我警告此变量，它将警告与旧内容相同的值。

这个想法是双重的： FIDDLE

textarea会在哪里更新div，当您单击保存时，在您单击编辑时会在div中获取内容。 这个简单的工作应该做，但是我的代码很糟糕，而且我找不到错误。 控制台中也没有错误。

我制作的exmaple和出现问题的地方的不同之处在于，我使用ajax调用来获取旧内容。

首先，这是编辑点击发生的情况：

$('body').on('click', '.edit_column', function() {      

    column_to_edit = $(this).parent().parent().attr('id');
    current_step = "edit";

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',
            data: {
                item_id: column_to_edit,
                mode: "edit_item"   
            }, success:function(s) {
                element_type = s.type;
                old_content = s.content;
            }, error:function(e) {  
                alert('Error!');
            }
        });

    if(element_type == 'text') {
        $('.input_type').html('<textarea class="dialog_editor element_content"></textarea>');   
    }


    $('.element_content').val(old_content);

    $('.column_tool_dialog').css('display', 'block');
    $('#edit_column_dialog').css('display', 'block');
    $('#edit_column_dialog').animate({
        left: "-=300px",
        opacity: "1"
    },500);
});

首先，我找到要编辑的列的ID，因此，我确定要在数据库中编辑正确的列。

current_step变量仅用于外观，具有一些不同的对话框。

我使我的ajax调用成功返回。

然后我有一个if语句来检查它是什么类型的列，我有3种类型，另外两种是image和headline，还没有开始，因为这还行不通。

if语句应仅构建输入，需要编辑该类型的列。

在输入字段经过构建后，将old_content放入文本区域，这也可以正常工作。 最后几行仅用于将外观代理设置为下一个对话框的动画。 因此，我的编辑步骤有效（我认为）。

然后，您会看到textarea，并且其中包含旧内容。 当您单击保存按钮时，会发生以下情况：

$('#element_edit_button').click(function(e) {   

    e.preventDefault();

    new_content = $('.element_content').val();

    alert(new_content);

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',           
            data: {
                item_id: column_to_edit,
                item_content: new_content,
                col_type: element_type,
                mode: "save_item",
                item_attr_alt_tag: alt_tag,
                item_attr_title_tag: title_tag  
            }, success:function(s) {
            }, error:function(e) {  
                alert('Der skete en fejl!');
            }
    });


    $('li#'+column_id+' .preview_content').html(new_content);
    $('li#'+column_id+' > div > small').html(new_content);
});

在这一步中，我有很多东西只是为了外观，因此这次我将它们排除在外。 但是问题在这里解释起来相当简单，new_content变量与old_content相同吗？ 因此，所有使用new_content的地方都不会更新。

编辑这是所有发生的html：

<div id=\"edit_column_dialog\" class=\"column_tool_dialog_box\">
                    <div class=\"close\">x</div>
                        <h3>Rediger dit element</h3>
                        <form method=\"post\" id=\"save_element\">
                            <p class=\"error_message\"></p>
                            <div class=\"input_type\"></div>
                            <input id=\"element_edit_button\" class=\"green dialog_button\" type=\"submit\" value=\"Gem element\" />
                        </form>
                    </div>
                </div>

抱歉，很长的帖子，希望有人有遮阳篷。

Answer 1

正如其他人所说，您的jquery甚至html都可能需要进行一些清理。 话虽如此，假设我正确理解了您的问题，我认为您只是在#element_edit_button click事件中缺少一行：

$('.element_content').val(new_content);

这应该够了吧。