动态添加到 Jquery && Asp.net 应用程序中的列表

Question

我有一个 asp.net 应用程序，其中包含以下代码：

<div class="divpere" >
                                        <div class="divfille1" ><label> Métier</label></div>
                                        <div class="divfille2" >
                                          <input type="text" name="nom" id="Text1"  value="" runat="server" />
                                          <asp:Button ID="addjob" Text="Ajouter" runat ="server"/>
                                        </div>
                                        </div>
                                         <br /> <br />

                                    <h4>Mes métiers</h4>
                                    <br />

                      <div class="widgetcontent bordered">
                            <div class="row-fluid">
                               <div class="span3 profile-left">
                                <ul class="taglist" id="mess" runat="server">
                                    <li><a href="">HTML5 <span class="icon-remove"></span></a></li>
                                    <li><a href="">CSS <span class="icon-remove"></span></a></li>
                                    <li><a href="">PHP <span class="icon-remove"></span></a></li>
                                    <li><a href="">jQuery <span class="icon-remove"></span></a></li>
                                    <li><a href="">Java <span class="icon-remove"></span></a></li>
                                    <li><a href="">GWT <span class="icon-remove"></span></a></li>
                                    <li><a href="">CodeNgniter <span class="icon-remove"></span></a></li>
                                    <li><a href="">Bootstrap <span class="icon-remove"></span></a></li>
                                 </ul>
                      </div></div></div>

还有这个脚本：

jQuery(document).ready(function () {
            jQuery('.taglist a').click(function () {
                return false;
            });
            jQuery('.taglist a span').click(function () {
                jQuery(this).parent().remove();
                return false;
            });
            jQuery('#addjob').click(function () {
              //
            });
        });

结果是：

我想完成脚本将点击事件添加到 bouton 中，将新元素 ul 添加到列表中，并以标题作为输入内容

• 我该怎么做？
• 最好的方法是什么？

谢谢，

Answer 1

使用append() 方法，您可以向您的ul 添加一个新的li 元素

试试这个：

jQuery('#addjob').click(function () {
    $('.taglist').append('<li><a href="">' + $('#Text1').val() + '<span class="icon-remove"></span></a></li>');
});

当你添加一个动态元素后，如果你想触发它，你需要将之前的代码更改为例如：

        jQuery(document).on('click', '.taglist a', function () {
            return false;
        });
        jQuery(document).on('click', '.taglist a span', function () {
            jQuery(this).parent().remove();
            return false;
        });