jQuery：使用變量ID重複函數輸出

我想使用onclick事件來顯示一個盒子裏面的div並添加一些按鈕，允許用戶編輯它的內容。jQuery：使用變量ID重複函數輸出

當我用一個單獨的按鈕觸發相同的功能，它一切正常，但當我嘗試添加一個類（可編輯）到我的網頁上的所有div觸發事件通過點擊divs它複製我的按鈕。因此，不是兩個按鈕上方和下方的框，然後顯示每個按鈕。

我希望這裏的任何人都可以幫助我。

我的代碼（簡化，風格刪除）：

的HTML（例如只有一個DIV）：

<form id="editorForm" action="" method="post"> 
    <div id="demo" class="editable"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac neque mollis, iaculis lacus ut, imperdiet orci. Phasellus vulputate purus quis dictum scelerisque. Curabitur fermentum leo odio, in iaculis risus adipiscing quis. 
    </div>    
</form>

的JS：

<script type="text/javascript"> 
    $(document).ready(function(e) 
    {  
     $('.editable').on('click', function(event) 
     { 
      editID = event.target.id; 
      var innerID = 'innerID' + editID; 
      var txt = $('#'+editID).html(); 
      var btnTop = "<div id='editor'> \ 
       <div id='editTop'> \ 
       <button type='button' onclick='function1()'>Button 1</button> \ 
       <button type='button' onclick='function2()'>Button 2</button> \ 
       </div> \ 
       <div id='editInput'>"; 
      var btnBottom = "</div> \ 
       <div id='editBottom'> \ 
       <button type='button' onclick='editCancel()'>Cancel</button> \ 
       <button type='button' onclick='editSave()'>Save</button> \ 
       </div> \ 
       </div>"; 

      $('#'+editID).html(btnTop + txt + btnBottom); 
      $('#editInput').attr('contenteditable', 'true'); 
     }); 
    }); 
</script>

非常感謝對於任何幫助，蒂姆。

來源

2013-11-04 user2571510

爲什麼不使用事件。目標，而不是它的ID直接與jQuery定位？ 'var target = event.target; var txt = $（target）.txt（）;'？ –

除非你在某處重複div ID，否則它似乎工作：http://jsfiddle.net/GFmgG/ – melancia

或者你可以完全忽略該id：http://jsfiddle.net/GFmgG/1/ – melancia

正如我在評論中所提到的，請確保您的DIV ID是唯一的（如網頁中的任何其他元素），並嘗試這個辦法：

$(document).ready(function() { 
    $('.editable').on('click', function() { 
     // If it's already an editable one, just ignore it 
     if ($(this).find('div[contenteditable=true]').length > 0) { 
      return false; 
     } 

     // Wrap the div content (text) into an editable one 
     $(this).wrapInner('<div contenteditable="true" />'); 

     // Top buttons 
     var btnTopWrapper = $('<div />'); 
     var btnTop1 = $('<button />').text('Button 1').on('click', function() { 
      function1(); 
     }); 
     var btnTop2 = $('<button />').text('Button 2').on('click', function() { 
      function2(); 
     }); 
     $(btnTopWrapper).append(btnTop1).append(btnTop2); 

     // Bottom buttons 
     var btnBottomWrapper = $('<div />'); 
     var btnBottom1 = $('<button />').text('Cancel').on('click', function() { 
      editCancel(); 
     }); 
     var btnBottom2 = $('<button />').text('Save').on('click', function() { 
      editSave(); 
     }); 
     $(btnBottomWrapper).append(btnBottom1).append(btnBottom2); 

     // Stick the top buttons before the editable div 
     $(this).prepend(btnTopWrapper); 

     // Stick the bottom buttons after the editable div 
     $(this).append(btnBottomWrapper); 
    }); 
});

演示：http://jsfiddle.net/GFmgG/2/

來源

2013-11-04 10:30:20 melancia

這工作完美 - 非常感謝快速回復和有用的意見！ – user2571510

不客氣。很高興我能幫上忙。 – melancia

jQuery：使用變量ID重複函數輸出

回答

相關問題