Question

我创建了一个循环，下面是该循环之间代码的一部分

--- Loop Starts ---

var aElement = $('<a>');
aElement.attr('href', '#');
aElement.text(title);

aElement.click(function() {
    alert("Hello World);
});

video_list_html += '<tr>' +
                        '<th scope="row">' + count + '</th>' +
                        '<td>' + aElement + '</td>' +
                    '</tr>';
--- Loop Starts ---

但是，由于aElement是一个对象，它不会作为html标签附加到 video_list_html ，但它会像这样附加

[object Object]

如何解决此问题，以便将其附加到 video_list_html 内，并且.click（）事件仍然有效。

Answer 1

尝试使用aElement [0] .outerHTML而不是aElement。保持点击处理程序不变。

Answer 2

问题是因为您无法将对象附加到字符串。对象被强制，结果就像你所见，[Object object]。

解决此问题的更好方法是将新HTML附加为整个字符串，然后使用委托事件处理程序从动态添加的元素中捕获事件。试试这个：

var data = [{
  videoId: 'abc123',
  title: 'Video #1'
}, {
  videoId: 'xyz987',
  title: 'Video #2'
}]

var video_list_html = data.map(function(o, i) {
  return '<tr><th scope="row">' + i + '</th><td><a href="#" data-videoid="' + o.videoId + '">' + o.title + '</a></td></tr>';
}).join('');

$('#yourTable').append(video_list_html).on('click', 'a', function(e) {
  e.preventDefault();
  console.log($(this).data('videoid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="yourTable"></table>

如何使用jquery将html对象连接到html字符串？

2 个答案: