用于捕获动态生成的非子元素的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>

1.
计费信息

单击

div.#step-3

中的按钮后，一些带有按钮的内容将加载到

div.#step-4

。单击该div中的按钮后，将在

#步骤5

中加载一个按钮。最后，单击

#步骤5

内的按钮后，我感兴趣的内容（

textarea

和另一个

按钮

）加载到

#步骤6

如何编写jQuery或JavaScript事件来访问

div.#步骤6 textarea

？我可以写几个嵌套的$（element）.on（）事件吗

---

另外，我无权更改任何现有的HTML、CSS或JavaScript文件。我只能编写新的JavaScript。

您似乎可以将委托事件绑定到一个公共静态祖先。
例如，

#checkOutSteps

：

jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
    ...
});

事件委派允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加--

---

也许你可以把它绑定到一个共同的祖先，比如

#checkoutSteps

@showdev谢谢你，你是个天才！我花了一整天的时间想弄明白！如果你用你建议的答案发表文章，我会接受它作为最好的答案。