編輯jquery網站上描述的地方不起作用

Question

這是從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圖像（基於他建議的代碼）....

初始顯示 - 首先點擊>

- >

上第二次點擊內textarea - >

這是繼續...

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

似乎這不是一個很好的教程，即使是基礎知識。注意變量的範圍：當你在一個function() {}環繞聲中聲明var revert時，它將在而不是在外部作用域或其他function() {}塊內部可用，除非它們嵌套在原始塊中。因此，在所有其他功能中，revert不存在。引用它會導致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 
} 

注意我假設你確實有保存和取消按鈕，您的標記，而只是選擇不包括他們在您的文章，因爲他們沒有真正相關的...

更正：想通了，你是在加入他們...

Answer 3

你好關閉這個問題。我想，花太多時間在這上面。我決定使用可調節的。它看起來很好，很小，可以加載到瀏覽器。

感謝大家的幫助和時間。對不起，我不得不改變路線，選擇可用的圖書館。它有比我想要的更多的代碼和選項，但是，使用上述代碼（以及許多更改）進行的測試產生了這種或那種錯誤的效果。