[英]How do I let the DOM know about new elements created on the fly?
I am making an AJAX call and I am building some HTML on the backend side. 我正在拨打AJAX,并在后端构建一些HTML。 I am returning them as a JSON and then using jQuery I render them, something like:
我将它们作为JSON返回,然后使用jQuery渲染它们,类似于:
$(data.message).each(function (index, value) {
$('#states_table tbody').append('<td>' + value.edit_link + '</td>');
});
value.edit_link
contains the following HTML: value.edit_link
包含以下HTML:
<a id="edit_0"
title="Edit"
onclick="javascript:return false;"
class="edit"
>Edit</a>
Then I will end up with something like this: 然后,我将得到这样的结果:
And as you can see the link doesn't have the hand cursor. 如您所见,链接没有手形光标。 My guess is that the DOM doesn't know about them when the page is rendered for first time so no CSS properties or default properties will be applied which makes me ask:
我的猜测是,第一次呈现页面时DOM不了解它们,因此不会应用CSS属性或默认属性,这使我问:
In order to have the links with the cursor: hand
, how do I let the DOM know about this new elements? 为了使带有
cursor: hand
的链接cursor: hand
,如何让DOM知道这个新元素?
Solution 1 解决方案1
Add to your link html href="#"
or href="javascript:void(0)"
so: 将html
href="#"
或href="javascript:void(0)"
添加到您的链接中,以便:
<a href="#"
id="edit_0"
title="Edit"
onclick="javascript:return false;"
class="edit"
>Edit</a>
For a full comprehension of <a>
html tag read this . 要全面了解
<a>
html标签,请阅读此内容 。
If you don't know if is better href="#"
or href="javascript:void(0)"
(nobody knows) read this discussion . 如果您不知道更好的方法
href="#"
或href="javascript:void(0)"
(没人知道),请阅读此讨论 。
Solution 2 解决方案2
Don't use an <a>
but a <button>
following the sentiment : 不要在情感之后使用
<a>
而是使用<button>
:
if
<a>
button doesn't have a meaningful href, it's a<button>
如果
<a>
按钮没有有意义的href,则为<button>
(for someone a <button>
outside a <form>
feels wrong. You decide.) (对于某人,
<form>
之外的<button>
<form>
感觉不对。您决定。)
so: 所以:
<button id="edit_0"
onclick="javascript:return false;"
class="edit"
>Edit</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.