jQuery on click change outer element

Question

I have structure like this:

<div class="summary entry-summary">
  <form>
    <div class="single_variation_wrap">         
      <div class="single_variation">
        <span class="price">
           <span class="amount">200.00грн.</span>
        </span>
        <p class="stock out-of-stock">Нет в наличии</p></div>
      </div>
    </div>
  </form>
  <ul class="variation-select" attr="pa_varnish_color"></ul>
  <ul class="variation-select" attr="pa_type_of_furniture"></ul>
</div>

I need on

click $(".variation-select").last().click(function () { })

change

  <p class="stock out-of-stock">Нет в наличии</p>

like this:

`$("p.stock").prependTo(".single_variation");`

move p.stock to be first element of .single_variation. I need to do this on click because first when page load there no .single_variation_wrap it's hidden. After click the last .variation-select .single_variation_wrap become to be visible. For better understand i load my page on hosting and adding link here. Also I add screenshot where I explain what I need to do.

page link: Product page link

enter image description here

You want to move the red text above the 200.00rph when you clcik that last button "Rcehb"? — NorCalKnockOut
– NorCalKnockOut, Commented Dec 9, 2014 at 16:30
You are right. When I click last .variation-select. There are many different variations can be. Red vs дуб, green vs клен and others. — sanchahous
– sanchahous, Commented Dec 9, 2014 at 16:32
I dont understand Russian, but do the "Tnn Aepeba" buttons all do something different? Can you assign a click function to each one or do you only want the last one? — NorCalKnockOut
– NorCalKnockOut, Commented Dec 9, 2014 at 16:35
First, i will get form with price only after click last variation. If you didn't click last variation - you will not get price form.That is problem, i can $("p.stock").prependTo(".single_variation"); do this only after click last variation. I don't have other way, or I don't know other way — sanchahous
– sanchahous, Commented Dec 9, 2014 at 16:41

iCollect.it Ltd · Accepted Answer · 2014-12-09 16:48:05Z

2

A delegated click event handler, attached to a non-changing ancestor, will do what you state, but I am not sure exactly what your aim is (not without more HTML and code):

 $(".summary").on("click", ".variation-select:last", function () { })

It works by applying the jQuery selector (.variation-select:last) at event time and not at event registration time (which is what click() does). Any click events bubble up to your class="summary" element, then the selector is applied to any elements in the bubble-chain, then your function is run against any matching elements that caused the event. In this case, your last variation-select element.

answered Dec 9, 2014 at 16:48

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanchahous Over a year ago

Yes!))) Many time I was trying to apply $(".variation-select").last().click(function () { }) but I was broke how to select outer element. Thank you. Next time I will now how to do this right way

Collectives™ on Stack Overflow

jQuery on click change outer element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related