新添加的 doms 中的 Javascript each() 函数答案

【问题标题】：Javascript each() function in newly added doms新添加的 doms 中的 Javascript each() 函数
【发布时间】：2017-12-21 23:00:37
【问题描述】：

我使用 ajax 将一些数据加载到我的一个 div 中，我有一个在新添加的 dom 上不起作用的 each 函数，我如何将它与“live”或“on”之类的东西绑定以对新添加的效果通过 ajax 添加 DOM？

$('ul.bigs > li').each(function(){
  console.log(this)
})

我的意思是“开启”类似于：

$(document).on('click', '.header a', function() {
  //do something

})

【问题讨论】：

你是说你已经在页面启动时运行了第一个块，如果更多的lis 被添加到ul.bigs，你希望内部函数在未来的某个任意点运行?
我想为新添加的 ul.big>li 项目做 console.log ，请注意，当新数据加载时，我的 ajax 删除了旧的 ul.big 并将新的 ul.bigs 加载到页面中跨度>

标签： javascript ajax html dom

【解决方案1】：

“新添加的 Doms”是什么意思？

因为如果你使用element.innerHtml = <div id='tst' >/div> 之类的东西，它就行不通了。

因为它不会更新 DOM，因为你只是在修改一个字符串。

【讨论】：

【解决方案2】：

将其包装在一个函数中，并在将数据附加到 DOM 后调用它。

function update() {
  $('ul.bigs > li').each(function(){
    console.log(this)
  }) 
}

// Below is pseudo-code
$.ajax(..., function (data) {
  // Add the data to DOM
  update() // Call the update function at the end.
})

【讨论】：

我之前试过这个，但我的问题是 "$('ul.bigs > li').each(function()" do not get new Doms
如何将数据添加到 DOM 中？
在 ajax "success: function(data)" 中获取结果，移除旧的 ul 并添加新的 ul 和 li（存在于 ajax 数据变量中）
我需要知道您使用什么 API 将数据插入 DOM。现在你只是告诉我你是如何通过 AJAX 获取数据的。
document.getElementById("MyULContainer").innerHTML = data;