附加文本和編輯文本div - 按鈕單擊事件

我正在使用div元素和jquery。我可以創建一個新的div，並通過點擊按鈕事件追加文本。得益於jqueryui plugn，創建的每個div都具有可拖動的屬性。另外，我也可以通過onclick事件刪除個人div。但我遇到了這個實現問題：因爲我能夠將文本附加到按鈕上點擊div。如何編輯以前創建的div的文本？ JSFIDDLE 附加文本和編輯文本div - 按鈕單擊事件

jQuery的

/** Remove newly created div **/ 
$(".remove").click(function(){ 
    $(".draggable").remove(); 
}); 

var z = 1; 
$('#button').click(function (e) { 
    /** Make div draggable **/ 
    $('<div />', { 
     class: 'draggable ui-widget-content', 
     html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>', 
     appendTo: '.middle-side', 
     draggable: { 
      containment: 'parent', 
      start: function(event, ui) { 
       $(this).css('z-index', ++z); 
      } 
     } 
    }).addClass('placement'); 


    /** Contain draggable div **/ 
    $('.middle-side').parent().mousemove(function(e){ 
     var offset = $(this).offset(); 
     var relX = e.pageX - offset.left; 
     var relY = e.pageY - offset.top; 
     $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'}); 
    }) 

}); 

$('body').on('click', '.draggable .close', function() { 
    $(this).closest('.draggable').remove(); 
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea> 
<br/> 
<input type="button" id="button" value="Add Div with Text" /> 
<br/> 
<div> 
    <div class="middle-side empty"></div> 

</div>

來源

2014-08-31 Code_Ed_Student

使用類似Angularjs的東西代替。 – Erevald 2014-08-31 16:44:01

由於您已經在使用jQuery-ui - 使用對話框怎麼辦？

這是一個（無風格）示例。正如Geraud Mathe建議我使用了dblclick()事件：

JSFiddle | Dialog Doc

theDivJustAdded.dblclick(function() { 
     var divElem = $(this); 
     dialog = $("#dialog-form").dialog({ 
      height: 300, 
      width: 350, 
      modal: true, 
      buttons: { 
       "Save": function() { 
        divElem.find('.text').text($("#dialog-form input").val()); 
        dialog.dialog("close"); 
       }, 
       Cancel: function() { 
        dialog.dialog("close"); 
       } 
      } 
     }); 

    } 
);

來源

2014-08-31 17:06:45 stefanr

我想補充一個雙擊事件監聽器添加的每個格，然後當事件觸發時，你得到的div的文本並將其添加到textarea中，將按鈕的文本從「添加Div文本」更改爲「更新div的內容」，當用戶單擊該按鈕時，將相關div的文本替換爲在textarea內

來源

2014-08-31 16:38:50

嗯不知道我是否完全關注你能否在jsfiddle上歪曲我的片段 – 2014-08-31 18:00:30

附加文本和編輯文本div - 按鈕單擊事件

回答

相關問題