1

所以我使用 PHP API 进行交互，使用 MooTools 建立一个论坛。我可以从我的数据库中获取评论并添加评论，但我想注入一个编辑按钮以与每条评论一致。

我使用以下方法注入评论：

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();
}

我想为每个注入的评论附加一个编辑按钮，并在按钮上添加一个事件侦听器，以将评论更改为用于编辑的文本区域，并带有一个更新按钮。

有任何想法吗？

4

1 回答 1

2

如果您想将全局事件绑定到动态内容，您最好查看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类的元素的点击事件（按钮）

  • 您的代码中有几个错误，但也许这只是一个示例，所以我没有涉及它。
于 2013-05-07T20:58:32.980 回答