javascript - 弹出窗口完全加载后如何单击按钮

Question

我想实用地点击一些 html 元素。 我使用 Jquery 选择器来选择一个按钮并单击它。

$('span.firstBtn').click();

单击此按钮后，将显示一个弹出窗口，然后我想单击弹出窗口中的一个按钮。

$('div.BtnOnPopupWindows').click();

但我得到空指针，因为代码运行时没有弹出窗口。所以我需要等到弹出窗口加载完成。我怎样才能做到这一点？如何等到弹出窗口加载完成？

Answer 1

使用 jQuery 的 .on() 方法 delegated event handlers :

// DELEGATED EVENT HANDLERS
// Delegate event for existing or future elements using .on() with delegation:
$(document).on("click", ".BtnOnPopupWindows", function() {
  console.log("BtnOnPopupWindows CLICK");
});

// DIRECT EVENT HANDLERS
// Define button click:
$('.firstBtn').on("click", function() {
  console.log("firstBtn CLICK")
  $('#popup').html(`<div class="BtnOnPopupWindows">TEST</div>`);
});

// Dynamically trigger stuff
$('.firstBtn').click();
$('.BtnOnPopupWindows').click();

<span class="firstBtn">BUTTON</span>
<div id="popup"><!--will be dynamically populated--></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

提示:不要使用 $(document) 尝试总是委托(delegate)给第一个静态(非动态)元素父元素。对于上面的例子，它会是这样的:

// Static parent - on click - dynamic child
$("#popup").on("click", ".BtnOnPopupWindows", function() {