0

这是从edit-in-place-using-ajax直接提升的，但它不起作用。谁能建议为什么？保存按钮和取消按钮都不做任何事情。我认为单击时的 saveButton 和 cancelButton 不会触发分配给其单击事件的 jquery 代码。

<script src="/jscript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#editInPlace").click(function(){
        var textarea = '<div><textarea rows="5" cols="30">' + $(this).html() + '</textarea>';
        var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton"/></div></div>';
        var revert = $(this).html();
        $(this).after(textarea+button).remove();
    });
    $('.saveButton').click(function(){saveChanges(this, false);});
    $('.cancelButton').click(function(){saveChanges(this, revert);});
    function saveChanges(obj, cancel) {
        if (!cancel) {
            var t = $(obj).parent().siblings(0).val();
            alert('new text='+t);
        }else {
            var t = revert;         //orig code had cancel;
            }
        $(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()
    }

});
</script>



 <div id='editInPlace'>we are going to change this comment.</div>

为@nbrook 添加图像（基于他建议的代码）....

初始显示 ->初始显示

第一次点击->第一次点击

在文本区域内第二次单击 - >在第二次点击...

这继续……

4

3 回答 3

1

看起来您正在尝试将事件处理程序绑定到页面加载时不存在的元素。更改这些：

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});

至：

$('div#editInPlace').on('click', 'input.saveButton', function(){saveChanges(this, false);});
$('div#editInPlace').on('click', 'input.cancelButton', function(){saveChanges(this, revert);});
于 2012-10-03T00:02:57.010 回答
0

这似乎不是一个很好的教程，即使是基础知识。请注意变量的范围：当您var revert在一个function() {}包装中声明时，它在外部范围或其他块内部将不可function() {}用，除非它们嵌套在原始范围中。因此，在您的所有其他功能中，revert都不存在。引用它会导致 a ReferenceError，并且 JS 解释器会中断所有错误，因此您不会收到警报。这应该会显示在您的 JS 错误控制台中。试试这个改变：

$(document).ready( function() {
    var revert;

    $("#editInPlace").click( function() {
        var textarea = '<div><textarea rows="5" cols="30">' + $(this).html()
                     + '</textarea>';
        var button = '<div><input type="button" value="SAVE" class="saveButton" />'
                   + 'OR <input type="button" value="CANCEL" class="cancelButton"/>'
                   + '</div></div>';

        revert = $(this).html();

        //$(this).after(textarea+button).remove();

        // to have this work more than once, better to do (corresponding change below)
        $(this).html(textarea+button);
    });

    // use delegated event handler for dynamically generated elements
    $('#editInPlace').on( 'click', '.saveButton', function() {
        saveChanges(this, false);
        return false;
    })
    .on( 'click', '.editButton', function() {
        saveChanges(this, revert);
        return false;
    }) // (you could also combine these into a single handler, based on `this`)

    .on( 'click', 'textarea', function() {
        return false;
    });
});

// no need for this in ready handler
function saveChanges(obj, cancel) {
    if (!cancel) {
        var t = $(obj).parent().siblings(0).val();
        alert('new text='+t);
    } else {
        var t = cancel;  // use cancel, that's why you pass it in...revert not in scope
        ///var t = revert; // orig code had cancel;
    }

    // If you use the approach below, your div clicks will only work once
    //$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()

    // Instead, do:
    $(obj).closest('#editInPlace').html(t); // replace the current html with the old stuff
}

请注意，我假设您实际上在标记中有保存和取消按钮，只是选择不将它们包含在您的帖子中，因为它们并不真正相关......

更正：弄清楚你在哪里添加它们......

于 2012-10-03T00:27:53.737 回答
0

你好结束这个问题。我想，在这上面花时间太多了。我决定使用 jeditable。它看起来不错且足够小，可以加载到浏览器上。

感谢大家的帮助和时间。抱歉，我不得不更改路线并选择 jeditable 库。它有比我想要的更多的代码和选项，但是，我用上面的代码（和许多更改）进行的测试产生了这个或那个错误的效果。

于 2012-10-03T16:46:49.860 回答