javascript - 我如何让 DOM 知道动态创建的新元素？

Question

我正在进行 AJAX 调用，并且正在后端构建一些 HTML。我将它们作为 JSON 返回，然后使用 jQuery 呈现它们，例如:

$(data.message).each(function (index, value) {
    $('#states_table tbody').append('<td>' + value.edit_link + '</td>');
});

value.edit_link 包含以下 HTML:

<a id="edit_0" 
   title="Edit" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</a>

然后我会得到这样的结果:

如您所见，该链接没有手形光标。我的猜测是 DOM 在第一次呈现页面时不知道它们，因此不会应用任何 CSS 属性或默认属性，这让我问:

为了获得与 cursor: hand 的链接，我如何让 DOM 知道这个新元素？

Answer 1

解决方案一

添加到您的链接 html href="#"或 href="javascript:void(0)"所以:

<a href="#"
   id="edit_0" 
   title="Edit" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</a>

全面理解<a> html标签读取this .

如果不知道是不是更好href="#"或 href="javascript:void(0)" (没人知道)阅读this discussion .

方案二

不要使用 <a>但是一个<button>以下 the sentiment :

if <a> button doesn’t have a meaningful href, it’s a <button>

(对于 <button> 之外的人来说，<form> 感觉不对。你来决定。)

所以:

<button id="edit_0" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</button>

按钮引用 there .