jquery add new div onclick

Question

I have a list of div

<li class="comment">
     <div class="comment-body" id="comment-body">
            <div class="comment-author vcard">
                <div class="lightbox-photo">
                    <a class="image-overlay" href='<%# "Foto/profil/foto_buyuk/" + Eval("Yorum_Profil_Foto_Buyuk") %>' data-rel="prettyPhoto" title='<%# Eval("Yorum_UserName")%>'><img src='<%# "Foto/profil/foto_kucuk/" + Eval("Yorum_Profil_Foto_Kucuk") %>' alt='<%# Eval("Yorum_UserName")%>' class="avatar" />
                    </a>
                 </div>
                 <cite class="fn"><asp:HyperLink ID="linkProfil" runat="server" Text='<%# Eval("Yorum_UserName")%>' NavigateUrl='<%# "~/profil.aspx?user_id="+Eval("User_ID") %>'></asp:HyperLink></cite>
                 <cite class="fn-time"></cite> 
               </div>
        <p><%# Eval("Yorum_Text")%></p>
           </div>
         </div>
     </div>
</li>

I want to add a new div on div click. I wrote jquery codes but it doesnt work.

function addcommentdiv () {
    var NewContent = '<div class=""><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>'
    $('.comment-body').click(function () {

        var index2 = $('.comment-body').index(this);
        if (NewContent != '') {
            $('.comment-body').eq(index2).after(NewContent);
            NewContent = '';

        }
        else {
            $('.comment-body').eq(index2).next().toggle();

        }

    });

};

Why it doesn't work or how can I add a new div to clicked div below (as twitter reply)? Before I wrote some code. It was working but there was a problem: it was working for one div only.

you need to call addcommentdiv on dom ready like $(function(){ addcommentdiv(); }). Other than that it looks fine jsfiddle.net/arunpjohny/7gyrB/1 — Arun P Johny
– Arun P Johny, Commented May 1, 2013 at 16:08
@ArunPJohny thanks but as I said it's working for just 1 div. I updated can you check ? link — serdar
– serdar, Commented May 1, 2013 at 16:11

Arun P Johny · Accepted Answer · 2013-05-01 16:19:55Z

3

Try

function addcommentdiv () {
    var NewContent = '<div class="reply"><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>'
    $('.comment-body').click(function () {
        var $this = $(this), $reply = $this.next('.reply');

        if ($reply.length) {
            $reply.toggle();
        } else {
            $(NewContent).insertAfter($this);
        }
    });
};

Demo: Fiddle

answered May 1, 2013 at 16:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

serdar Over a year ago

can I ask one more question @Arun :S I couldnt get display balue of reply. var cevapladisplay = $reply.css('display'); this code returns undefined.how can I get value of css display property

user856358 · Accepted Answer · 2013-05-01 16:07:25Z

0

I'm not too familiar with jquery, but you can add a new div through javascript

var NewContent = '<div class=""><input name="name" type="text" id="name" size="20"          value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-  size:14px;" /></div>'


$('.comment-body').click(function () {
var newdiv=document.creatElement(NewContent);
var toattach= document.getElementById('comment-body');
toattach.appendchild(newdiv) ;
}
else {
    $('.comment-body').eq(index2).next().toggle();

}

});

answered May 1, 2013 at 16:07

user856358

6031 gold badge8 silver badges18 bronze badges

1 Comment

Pino Over a year ago

I see an "else" without an "if".

Collectives™ on Stack Overflow

jquery add new div onclick

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related