在ajax 监听函数里面动态插入的标签节点,经过反复尝试,无法获取该标签的操作节点,Console.log结果总是null。

Kitty
  • 118

<ul id="list">

</ul>
<script src="AjaxBase.js"></script>
<script>
var xhr = createXHR();
var name = "hh";
var olist = document.getElementById('list');
function read() {
    xhr.open('GET', 'show.php?type=query', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //刷新页面
            //得到返回的数据
            var oJson = JSON.parse(xhr.responseText);
            olist.innerHTML = '';

            if (oJson.status == 1) {

                for (var i = oJson.data.length - 1; i >= 0; i--) {
                    var span = document.createElement("span");
                    var img = document.createElement("img");
                    span.innerHTML = oJson.data[i].name + ':' + oJson.data[i].content;
                    var li = document.createElement("li");
                    li.appendChild(img);
                    li.appendChild(span);
                    var p = document.createElement("p");
                    p.innerHTML = "<label id='sp1'>编辑</label><label id='sp2'>删除</label>";
                    li.appendChild(p);
                    document.getElementById('list').appendChild(li);
                }
            }
        }

    }
    xhr.send(null);
}
timer = setInterval(read, 1000);
var obj = document.getElementById("sp1");
console.log(obj);// 显示null,获取不到?
</script>
回复
阅读 2.1k
4 个回答
✓ 已被采纳

建议题主了解下异步编程,和js中回调函数的执行方式。
对你你的代码,有两点,第一因为你调用了setInterval(),所以

timer = setInterval(read, 1000);

这句代码只是让浏览器在1s后把这个函数放如event loop中,等待执行,然后会立马返回接着执行你后面的getEl和console,所以别说获取了,在你console的时候,read都压根没有执行,这个可以通过在read中加console来证明。
再退一步,即使你不是通过setInterval来调用read,而是直接调用read,那也无法获取,道理同上,只不过这次read确实执行了

你也说了是监听函数里动态添加的。
也就意味着是在异步回调里添加的。
而异步函数是在JS的主线程结束之后才会被执行。
而你的var obj = document.getElementById("sp1");是非异步的。
他的执行要比异步回调要早,所以在你的dom结构里有这个元素之前上述语句就已经获取过了,所以是null
具体的可以查一下event loop

因为ajax一般是异步的,你获取数据的时候,下面的获取dom的代码已经执行了

事件代理,把事件代理在document上,根据触发的元素绑定事件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏