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

這應該夠了吧。