如何在腳本中停止多個帖子？

Question

我已經爲我的頁面編寫了一個基本的文本編輯器。任何具有.edit類的標籤都可以通過登錄用戶進行點擊，並且除了解除「點擊」之外，還會出現一個表單，其中textarea字段中的文本將被編輯。提交後，函數執行一個帖子並通過ColdFusion組件更新數據庫，並重新加載頁面以反映所做的更改。很好的工作（謝謝不少於Stackoverflow社區和Ray Camden）。

我創建了一個'取消'功能，清除表單字段（因爲它是可重用的），並重新綁定'點擊'。麻煩的是，我在螢火蟲中看到，如果我點擊一些文本，取消，點擊其他文本，然後點擊提交我的代碼執行兩個職位 - 一個用於取消點擊，一個用於實際。

我需要做些什麼來殺死第一次中止的努力？

下面的代碼：

$(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」元素的處理程序，確保他們是‘乾淨’的第一：

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 */ 

請注意，代碼絕對存在絕對問題，它並不意味着只是複製粘貼。你應該查看它，並確保你明白爲什麼我在快速檢查中改變了某些東西。請指出修復。祝你好運。