javascript - knockout 嵌套组件 : $(document). Ready() ...在加载嵌套组件之前运行

Question

所以我有几个嵌套的 knockout 组件:

<component1>
   <component2>
   ....
   </component2>
</component1>

component1 是我自己的组件，由我编写，但 component2 是第三方代码，我不应该更改它。问题是这样的:

在 $(document).ready() 中，我使用 jquery $('button').click(...) 来分配点击事件处理程序，为了简单起见，说所有按钮。结果是，只有组件 1 内部和组件 2 外部的按钮获得处理程序，而组件 2 内部的按钮都没有处理程序(当我单击它们时没有任何反应)。

请注意，component2 依赖(消耗)来自某些 ajax 调用的数据，因此这可能会延迟其加载。因为 ajax 是异步的，所以 $(document).ready() 甚至可能在 ajax 完成之前运行，因此 $('button').click(...) 没有' t 捕获组件内的按钮，因为它们尚未渲染。

其他问题:在组件2内部时，组件1的viewmodel1似乎始终为空。上下文正确；它只是空的(例如:viewmodel1 的数组在 component2 内部为空，而在 component2 外部则不为空。

如何让component2内的所有按钮都获得处理程序？

Answer 1

您应该使用event delegation ，这样在您设置触发器时 DOM 元素就不必出现。

$(document).on('click', 'button', ...);