Question

所以我使用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();
}

我想为每个注入的注释添加一个编辑按钮，并在按钮上添加一个事件监听器，将注释更改为textarea以进行编辑，并带有更新按钮。

有什么想法吗？

Answer 1

如果要将全局事件绑定到动态内容，最好先查看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事件

您的代码中有多处错误，但可能只是一个示例，因此我与之无关。

使用MooTools / AJAX编辑带注释的按钮

1 个答案: