CODEWITHSUNDEEP
javascriptjquery
thetipsyhacker
thetipsyhacker

Reputation: 1422

JavaScript Event for Capturing Dynamically Generated Non-Children Elements

I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.

For example, what appears on initial page load is this: 

<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>

Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.

How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?

P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.

Upvotes: 0

Views: 22

Answers (1)

showdev
showdev

Reputation: 29168

It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:

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

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation

Upvotes: 1

Related Questions