dynamic addition to a list within Jquery && Asp.net application

Question

I have an asp.net application in which i have this code :

<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>

and this script :

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 () {
              //
            });
        });

the result is :

I'd like to complete the script to add the click event into the bouton which add a new element ul to the list with a title as the input content

How can i do that?
What is the best way?

Thanks,

Alessandro Minoccheri · Accepted Answer · 2014-05-03 22:34:27Z

1

With method append() you can add to your ul a new li element

try this:

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

When you add a dynamic element after if you want to fire it you need to change your previous code to this for example:

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

edited May 3, 2014 at 22:34

answered May 3, 2014 at 22:28

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

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

4 Comments

Lamloumi Afif Over a year ago

it is good idea : i deleted the runat="server" to avoid the postback but i got aways undefined as new value!!!!!

Alessandro Minoccheri Over a year ago

if the value is undefined means that you don't select the right element. @Lamloumi

Alessandro Minoccheri Over a year ago

can you create a jsfiddle? @Lamloumi

Lamloumi Afif Over a year ago

nice i deleted all the runat="server", and it works fine.thanks,

Collectives™ on Stack Overflow

dynamic addition to a list within Jquery && Asp.net application

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related