Как получить все содержимое html элемента управления с кликом?

Question

Я знаю, как получить содержимое щелкнутого контроля, но сейчас ситуация немного сложнее, в частности, я имею контейнер, как это:

<div id='wizard-frame-1'> 
<div class="available_services"> 
     <div class="available_service-row" data-id="1"> 
      <strong>Taglio capelli</strong> 
       <br>Durata: 20 - Prezzo: 50.00 €<br> 
     </div><hr> 
     <div class="available_service-row" data-id="2"> 
      <strong>Colore capelli</strong> 
       <br>Durata: 50 - Prezzo: 30.00 €<br> 
     </div><hr> 
     <div class="available_service-row" data-id="3"> 
      <strong>Trattamenti viso</strong> 
       <br>Durata: 30 - Prezzo: 15.00 €<br> 
     </div><hr> 
    </div> 
</div> 

это результат
Теперь что Я пытаюсь сделать, это передать выбранную строку available_service-row другому JScrollPane:

<div id='wizard-frame-1'> 
    <div class="services_added"></div> 
</div> 

То, что я попытался это:

$(document).on('click', '#wizard-frame-1 .available_service-row', function() 
{ 
     console.log($(this).html()); 
}); 

Но результат возвращается так:

<strong>Colore capelli</strong><br>Durata: 50 - Prezzo: 30.00 €<br> 

Как вы можете видеть, что есть только содержание щелкнули сОн строки, мне нужно получить также родительский контейнер, так что ДИВ, в этом случае я 'Ожидание этого результата:

<div class="available_service-row" data-id="1"> 
     <strong>Taglio capelli</strong> 
     <br>Durata: 20 - Prezzo: 50.00 €<br> 
</div> 

Я не знаю, правильно ли это сделать. Например, когда я использовал select, я могу скопировать параметр вроде .clone(), но теперь ситуация другая. Предложения?

Answer 1

Чтобы получить элемент outerHTML:

this.outerHTML 

В JQ (для последовательности кода при использовании JQuery):

$(this).prop('outerHTML');