Question

我正在使用Node.js制作ajax表。我可以在不刷新整个页面的情况下更新行，也可以删除任务。由于以下原因，它并不完美，请看图像。

当我更新某些行时，我点击“删除”按钮，它无效。但是在我刷新整个页面之后，它运行良好。也许这是一个非常冗长的问题，如果你没有足够的时间 - 请看js文件，有问题的关键...好的，那么代码是：

html ：如果我加载页面，页面将找到数据库并显示每个页面。我觉得这没问题。

<table id="tb-docs">
    <thead>
    <tr>
        <th width="50">Active</th>
        <th width="300">Subject</th>
        <th>Content</th>
        <th width="110">Action</th>
    </tr>
    </thead>
    <tbody>
    <% posts.forEach( function ( post, index ){ %>
    <tr>

        <td><input type="checkbox"/></td>
        <td><%= post.Subject %></td>
        <td><%= post.Content %></td>

        <td><button onclick="deleteRow(this,'<%= post._id %>')">Remove</button>
        </td>
    </tr>
    <% }); %>
    </tbody>
</table>

js ：我强烈怀疑updateRow函数中的'append（）'。也许有些不对劲，

function updateRow(subject, content){
$.ajax({
    url: "/",
    type: "POST",
    data: { 'subject': subject, 'content': content },
    success: function(data){

        $('#tb-docs').append('<tr>' +
        '<td><input type="checkbox" checked/></td>' +
        '<td>'+subject+'</td>' +
        '<td>'+content+'</td>' +

        // *** Here Appended button is not worked !!!! ***
        '<td><button onclick="deleteRow('+this+','+data+')">Remove</button></td>' +
                '</tr>');
    }
});
}

function deleteRow(obj, id) {
$.ajax({
    url: "/dbs/destroy/"+id,
    type: "POST",
    data: { 'id': id },
    success: function(data){
        $(obj).closest('tr').fadeOut(300,function(){
            $(obj).closest('tr').remove();
        });
    },
});
}

服务器（node.js）

// update row handler ===============

app.post('/', function (req, res){
  new posts({
    Subject: req.body.subject,
    Content: req.body.content,
    Active: true
  }).save(function (err, post) {
    if (err) return next(err);

    res.send(post._id);
  });
});

// delete row handler ===============

app.post('/dbs/destroy/:id',function (req, res){
  posts.findById(req.params.id, function (err, post){
    if (err) res.send(err) ;

    post.remove(function(err, todo, next){
      if(err) return next(err);

      res.sendStatus(200);
    });
  });
});

我挣扎了2天。表中的这一追加行只是技巧，对吧？所以我认为附加的'按钮'不起作用，但重新加载页面'按钮'是有效的。然后，如何使用附加按钮执行操作？

我认为另一种方式，分开这个表html文件和ajax get调用。但是我有很多桌子，所以这是非常努力而且效率不高的方式。你能告诉我什么是真正的问题吗？抱歉没有小提琴，因为它与数据库有关。无论如何感谢阅读。！

Answer 1

而不是使用＆＃39; + this +＆＃39;只需在deleteRow按钮的onclick函数中输入。

function updateRow(subject, content){
$.ajax({
    url: "/",
    type: "POST",
    data: { 'subject': subject, 'content': content },
    success: function(data){

        $('#tb-docs').append('<tr>' +
        '<td><input type="checkbox" checked/></td>' +
        '<td>'+subject+'</td>' +
        '<td>'+content+'</td>' +

        // *** Here Appended button is not worked !!!! ***
        '<td><button onclick="deleteRow(this,'+data+')">Remove</button></td>' +
                '</tr>');
    }
});
}

function deleteRow(obj, id) {
$.ajax({
    url: "/dbs/destroy/"+id,
    type: "POST",
    data: { 'id': id },
    success: function(data){
        $(obj).closest('tr').fadeOut(300,function(){
            $(obj).closest('tr').remove();
        });
    },
});
}

Ajax使用node.js和mongoose

1 个答案: