使用MooTools/AJAX編輯按鈕和註釋

因此我使用PHP API與MooTools進行交互，構建論壇。我可以從我的數據庫中獲得評論並添加評論，但我想注入一個編輯按鈕以與每個評論一致。使用MooTools/AJAX編輯按鈕和註釋

我使用注入註釋：

function domReady() { 
    $('newComment').addEvent('submit', addComment); 
} 

function addComment(e){ 
e.stop(); 
var req = new Request({ 
    url:'control.php?action=insertPost', 
    onSuccess:addajaxSuccess 
}).post(this); 
} 


function addajaxSuccess(idNo) { 
new Element('span',{ 
    'text':'Post successful.' 
}).inject($(newComment)); 
$('commentList').empty(); 
domReady(); 
}

我要附加一個編輯按鈕可以注入每個評論，按鈕添加事件偵聽器改變成EDITTING textarea中的評論，有一個更新按鈕。

任何想法？

來源

2013-05-07 Chris

根據你的榜樣，它看起來像成功的請求之後，你只需要添加一個成功消息「newComment」元素。請問「newComment」元素已經包含註釋文本，並且是要在其中添加按鈕和文本區域？看起來你已經知道如何添加事件偵聽器，創建元素，並將其注入到其他 - 所以這很難告訴你需要什麼幫助！ – potatoe 2013-05-07 20:33:17

如果要將全局事件綁定到動態內容，最好查看Element Delegation在mootools中。

基本上它可以讓您將事件綁定到某個容器，並「偵聽」該容器在選擇器上的事件。我讓你在這裏一個小例子：

http://jsfiddle.net/xwpmv/

mainContainer.addEvents({ 
    'click:relay(.mt-btn)': function (event, target) { 
     var btn = target; 
     if(btn.get('value') == 'Edit'){ 
      btn.set('value','Done Editing'); 
      var content = btn.getPrevious(); 
      content.setStyle('display','none'); 

      var textarea = new Element('textarea').set('text',content.get('text')); 
      textarea.inject(btn,'before'); 

     } 
     else{ 
      btn.set('value','Edit');  
      var textarea = btn.getPrevious(); 
      var new_value = textarea.get('value'); 
      textarea.destroy(); 
      var content = btn.getPrevious(); 
      content.set('text',new_value); 
      content.setStyle('display','block'); 
     } 
    } 
});

在這裏你可以看到mainContainer上聽誰擁有mt-btn類（按鈕）

你的每一個元素的click事件你的代碼中有幾處錯誤，但也許它只是一個例子，所以我沒有涉及到它。

來源

2013-05-07 20:58:32 Adidi

沒有錯誤，我只是使用了不顯眼的JavaScript，這個例子確實有幫助，只是適應它與事件監聽器一起工作。謝謝。 – Chris 2013-05-07 22:34:05

使用MooTools/AJAX編輯按鈕和註釋

回答

相關問題