jquery添加新的div onclick [英] jquery add new div onclick

查看:32
本文介绍了jquery添加新的div onclick的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 div 列表

  • <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")%>'类=头像"/></a>
  • <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>

    <p><%# Eval("Yorum_Text")%></p>

    我想在 div 单击时添加一个新 div.我写了 jquery 代码,但它不起作用.

    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);如果(新内容!= ''){$('.comment-body').eq(index2).after(NewContent);新内容 = '';}别的 {$('.comment-body').eq(index2).next().toggle();}});};

    为什么它不起作用,或者我如何向下面单击的 div 添加一个新 div(作为 twitter 回复)?在我写一些代码之前.它可以工作,但有一个问题:它只适用于一个 div.

    解决方案

    尝试

    function addcommentdiv() {var NewContent = '<div class="reply"><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-顶部:10 像素;宽度:480 像素;左边距:90 像素;字体大小:14 像素;"/></div>'$('.comment-body').click(function () {var $this = $(this), $reply = $this.next('.reply');如果($reply.length){$reply.toggle();} 别的 {$(NewContent).insertAfter($this);}});};

    演示:小提琴

    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.

    解决方案

    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

    这篇关于jquery添加新的div onclick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆