Question

我为我的网页编写了一个基本的文本编辑器。任何具有.edit类的标记都可以由登录用户单击，并且除了解除“单击”之外，还会出现一个表单，其中包含要编辑的textarea字段中的文本。提交后，该函数执行一个帖子并通过ColdFusion组件更新数据库并重新加载页面以反映所做的更改。效果很好（非常感谢Stackoverflow社区和Ray Camden）。

我创建了一个“取消”功能，可以清除表单字段（因为它可以重复使用）并重新绑定“点击”。问题是，我在firebug中看到，如果我点击一些文本，取消，点击其他文本，然后点击提交我的代码执行两个帖子 - 一个用于取消点击，一个用于真实。

我需要做些什么来杀死第一次流产？

以下是代码：

    $(document).ready(function() {

$('#cancelEdit').click(rebinder);
$('.edit').click(texteditor);

function texteditor(){
    var theName = $(this).attr('name'); 
    var textToEdit = $(this).html();
    var theParentID = $(this).closest('div').attr('id');
    var theTag = this.tagName.toLowerCase();
    var theID = theName.split("-")[1];
    var gateway = ("<cfoutput>#URL.page#</cfoutput>");
    var fieldDims = [$(this).css('width'), $(this).css('height')];

    $('#theText').attr('value', textToEdit );
    $('#theText').css('height', fieldDims[1]);
    $('#theText').css('width', fieldDims[0]);
    $('.edit').unbind('click');


    $('#texteditform').submit(function(e){
    //stop the form submission
      e.preventDefault()
        var newText = $('#theText').val();
        //CFC
        $.post("cfc/engine.cfc?method=updateText&returnformat=json", 
            {text:newText, field:theID, gateway_id:gateway},
            function(res) {
                //Handle the result
                if(res.trim() == "true") {
                    $('#theText').attr('value', '');
                    location.reload();
                    //$('.edit').bind('click');
                } else {
                    alert("Didn't Work");
                }
            });
    });

    };

function rebinder(){
    alert('rebinder');
    $('.edit').click(texteditor);
    $('#theText').attr( 'value', '' );
    $('#theText').css('height', '');
    $('#theText').css('width', '');
};


// End of document.ready function //                
});

我只是看了一下控制台，不仅邮件发生了两次，而且它将第二次尝试的文本发布到两个帖子上，不幸的是用.edit类更新了两个元素。那太糟糕了......

Answer 1

您多次绑定表单上的提交事件。将绑定移出texteditor函数或在绑定之前取消绑定事件。

Answer 2

不要盲目地重新绑定“.edit”元素的“click”处理程序，而是先确保它们“干净”：

function rebinder(){
    alert('rebinder');
    $('.edit').unbind('click').click(texteditor);
    // ...
}

有时为了不同的目的，还有其他处理程序用于“点击”。在这种情况下，您只需要取消绑定“编辑器”功能的处理程序。为此，jQuery允许您使用上下文标记绑定事件，以便稍后可以取消绑定所需的单击处理程序。这看起来像这样：

    $('.edit').unbind('click.editor').bind('click.editor', texteditor);

换句话说，不是仅仅“点击”，而是在'。'之后添加后缀。并且该后缀区分了可能被绑定的任何其他点击处理程序。（在这种情况下，当然可能没有必要。）

Answer 3

Ofeargall，问题似乎在于如何将submit事件绑定到您的表单。我已经在下面重构了你的代码以获得乐趣，并且还使用了绑定来提交texteditor()之外的函数。让我知道它是否成功或者你是否还有麻烦。我希望你明白为什么会遇到这个问题，如果你不这样做，请随时提出进一步的问题。

$(function() {
    $('#cancel').click(rebinder);
    $('.edit').click(texteditor);

    $('#texteditform').live('submit', function(e) {
        // stop the form submission
        e.preventDefault();
        var $el = $(this /*, DOM_ELEMENT_PARENT */);
        var $theText = $('#theText', this); // change this?
        var newText = $theText.val(),
            // NOT USED: theParentID = $el.closest('div').attr('id'),
            theTag = this.tagName.toLowerCase(),
            theID = theName.split("-")[1],
            gateway = ("<cfoutput>#URL.page#</cfoutput>"),

        // CFC
        $.post("cfc/engine.cfc?method=updateText&returnformat=json", 
            {text:newText, field:theID, gateway_id:gateway},
            function(res) {
                // Handle the result
                if(res.trim() == "true") {
                    $theText.attr('value', '');
                    location.reload();
                    // $('.edit').bind('click');
                } else {
                    alert("Didn't Work");
                }
            }
        );
    });

    function texteditor() {
        var $el = $(/* DOM_ELEMENT_WITH_EDITABLE_TEXT, DOM_ELEMENT */);
        var theName = $el.attr('name'), 
            textToEdit = $el.html(),
            fieldDims = [$el.css('width'), $el.css('height')];

        $('#theText, #texteditform').attr('value', textToEdit )
                                   .css({
                                        'height' : fieldDims[1],
                                        'width' : fieldDims[0]
                                   });

        // you should make only current .edit unbound, and autocancel
        // when other .edit is clicked (and by cancel -- change to just
        // temporary disabling the form (hiding, etc.) such that the
        // text edits are saved if same .edit is clicked later
        $('.edit').unbind('click');
    }       

    function rebinder() {
        // alert('rebinder');
        $('.edit').click(texteditor);
        $('#theText, #texteditform').attr('value', '')
                     .css({
                        'height' : '',
                        'width' : ''
                     });
    }

}); /* END */

请记住，代码中肯定存在问题，并不仅仅是复制粘贴。你应该仔细检查并确保理解为什么我在快速检查中改变了某些东西。请指出修复。祝你好运。

如何在脚本中停止多个帖子？

3 个答案: