按照jquery网站上的说明进行编辑

Question

这是edit-in-place-using-ajax的直线提升，但它不起作用。有谁能提出为什么？既不保存按钮也不取消按钮做任何事情。我认为单击时saveButton和cancelButton不会触发分配给其click事件的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添加图片（基于他建议的代码）....

初始显示 - ＆gt;

第一次点击

- ＆gt;

在textarea内第二次点击 - ＆gt;

这继续......

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

Answer 2

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

ReferenceError

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

更正：弄明白你要添加它们的位置......

Answer 3

你好关闭这个问题。我想，花时间在这上面太过分了。我决定使用jeditable。它看起来很好，小到足以加载到浏览器。

感谢所有人的帮助和时间。对不起，我不得不改变路线，选择可修改的图书馆。它有比我想要的更多的代码和选项，但是，我对上面代码（以及许多更改）的测试产生了这种或那种错误的效果。