如何捕获动态生成的非子元素的JavaScript事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (76)

我需要能够访问一个元素,在几次单击事件之后可以通过Ajax访问该元素。我不能简单地使用$(元素).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里面的按钮后,在#step-6中加载了我感兴趣的内容(textarea和另一个按钮)。

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

提问于
用户回答回答于

似乎可以将委托事件绑定到常见的静态祖先。

例如, #checkOutSteps:

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

扫码关注云+社区

领取腾讯云代金券