Question

我正在尝试编写一段可以处理动态HTML表的删除或编辑的代码。我已经搜索了这个问题，然后用stackoverflow进行了搜索，我看到了很多示例，但是它们都无法正常工作。

这是我的代码：

server.js

router.get('/bookShow', (req, res) => {
    bookModel.find({isDeleted : false}).sort('-pageCount').exec((err, data) => {
        if (data) {
            res.send(data);
        }
    });
});

数据库中的BookModel：

bookShow.html

<script>
    $(document).ready(() => {
        $.getJSON('/bookShow', (json) => {
            var tr;
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + "<button class='deleteButton'>" + "<i class='material-icons'>delete</i></button>" + "</td>");
                tr.append("<td>" + "<button class='editButton'>" + "<i class='material-icons'>edit</i></button>" + "</td>");
                tr.append("<td>" + json[i].pageCount + "</td>");
                tr.append("<td>" + json[i].name + "</td>")
                $('table').append(tr);
            }
        });

        $(document).on('click', '.deleteButton', () => {
            console.log($(this));
        })
    });  
</script>

问题：正如在bookShow.html中看到的那样，每当.deleteButton单击时，我就声明了一个事件监听器。但是我无法访问该表行的其他字段。例如，当我单击Behzad的删除按钮时，不会通知我书名及其页数。

Answer 1

通过使用ES6的箭头功能 () => {}，this不再是您使用function所喜欢的。由于其词法范围绑定的性质，因此它是window。不再是jQuery的DOM元素“ this”的表示形式。

$(this) =
   jQuery.fn.init [Window] 通过usign Arrow函数() => {}
  使用函数function () {}
jQuery.fn.init [button.deleteButton]

所以您的解决方案是使用标准的$(document).on('click', '.deleteButton', function() {

或在按钮创建时添加click-通过使按钮成为 live 内存中jQuery元素$('<button>', {on:{click(){}}, appendTo:'selector'})而不是HTML字符串文字，可以实现此目的。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这里是翻拍：

const json = [ // You use getJSON, I'll use this for my demo
{"name": "King of the Jungle","pageCount": 543},
{"name": "The Things I've Done","pageCount": 198}
];

jQuery($ => {

  // $.getJSON

  $('table').append(json.map((book, i) => 
    $('<tr>', {
      html: `
        <td>${i+1}</td>
        <td>${book.name}</td>
        <td>${book.pageCount}</td>
      `,
      append: [       // or use prepend
        $('<td>', {
          append: $('<button>', {
            class: "buttonEdit",
            html: "<i class='material-icons'>edit</i>",
            on: {
              click() { // Same as using `click: function () {`
                console.log(`Editing ${book.name} by:`, this); // this = <button>
              }
            }
          })
        }),
        $('<td>', {
          append: $('<button>', {
            class: "buttonDelete",
            html: "<i class='material-icons'>delete</i>",
            on: {
              click() {
                console.log(`Deleting ${book.name} by:`, this);
              }
            }
          })
        }),        
      ]
    })
  ));

  // END $.getJSON

});

table {
  width: 100%;
}

td {
  border: 1px solid #ddd;
}

<table></table>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

无法获得使用javascript动态删除/编辑HTML表的价值

1 个答案: