javascript - 用于捕获动态生成的非子元素的 JavaScript 事件
问题描述
我需要能够在几次点击事件后访问通过 AJAX 可用的元素。我不能简单地使用 $(element).on('click', selector, event) 因为我需要访问的元素不是子元素。
例如,初始页面加载时出现的内容是:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
<a href="#">Edit</a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
一旦我单击里面div.#step-3
的按钮,就会加载一些带有按钮的内容div.#step-4
。单击该 div 中的按钮后,将加载一个按钮#step-5
。最后,点击里面的按钮后,会加载我感兴趣的#step-5
内容(textarea
和另一个)。button
#step-6
我该如何编写一个 jQuery 或 JavaScript 事件来允许我访问div.#step-6 textarea
? 我可以编写几个嵌套的 $(element).on() 事件吗?
PS 我无权更改任何现有的 HTML、CSS 或 JavaScript 文件。我只能编写新的 JavaScript。
解决方案
似乎您可以将委托事件绑定到一个共同的静态祖先。
例如#checkOutSteps
:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
事件委托允许我们将单个事件侦听器附加到父元素,该事件侦听器将为匹配选择器的所有后代触发,无论这些后代现在存在还是将来添加。--事件委托
推荐阅读
- syntax - 案子?VHDL2008匹配case语句
- powershell - Windows下的Zabbix Userparameter在本地工作,但不是来自Zabbix Server
- user-interface - 在 Windows 上通过 OpenSSH 启动 GUI 程序?
- android - JetPack Navigation 从子模块导航到父图
- java - Java如何将文本文件中的内容存储到arraylist
- spring - Spring Boot中双向一对多关系的LazyInitializationException
- python-3.x - 从 2D 列表中选择列具有所需值的所有行
- python - 如何在python中做与两列相关的多个直方图/条形图?
- c++ - 如果以下行不包含决策或分支,则 GDB 无法跨过函数
- php - 使用 PHP 在 Google 应用引擎中进行连接检查