how can content between a class put in a variable after click?

How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?

<div class="adding">
    <b>
        <div class="column">
            <div class="mediumCell">
                <input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
            </div>
        </div>
        <div class="column" style="margin: 5px 3px;">
            <div class="mediumCell">
                <div class="adda">
                    <a href="#" class="add_input"></a>
                </div>
            </div>
  开发者_开发问答      </div>
    </b>
</div>

var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"><a href="#" class="add_input"></a></div></div></div></b></div>'

In each click I want to get the content just once.

Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).

I tried this:

$(function () {        
    var i = $('.adding').size();
    $('.add_input').live('click', function () {
        var scntDiv = '.' + $(this)
                           .closest('.find_input')
                           .find('div')
                           .attr('class');
            var input = $(scntDiv).html();
            $(this).remove();
            $(input).appendTo(scntDiv);
            i++;
            return false;
        });
});

---

You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.

Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():

var adding = $("div.adding").clone().wrap("<div>").parent().html();

---

You can get the inner HTML using the html function:

var adding = $(".adding").html():

...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.

However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing^(tm), it's much better with dynamic web apps to ensure that your HTML is valid.

---

Is that what you're asking for ?

var adding;
$('.adding').click(function(){
    adding = $(this).html();
    alert(adding);
});

---

var adding = $(".adding").html();

maybe?