Question

我需要能够访问几个点击事件后可通过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）。

如何编写允许我访问div.#step-6 textarea的jQuery或JavaScript事件？我可以写几个嵌套的$（元素）.on（）事件吗？

P.S。我无权更改任何现有的HTML，CSS或JavaScript文件。我只能写新的JavaScript。

Answer 1

您似乎可以将委派的事件绑定到一个共同的静态祖先例如，#checkOutSteps：

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

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

用于捕获动态生成的非子元素的JavaScript事件

1 个答案: