如何使jquery.dynamiclist与更高版本的jquery一起运行？

Question

I would like to use jquery.dynamiclist library in my procject. In the demo page that's running smoothly there is a jquery library in version 1.8.2. In my project I use version 1.11.1 and this makes dynamiclist plugin doesn't work. With newer version when I process form I get data with names of inputs but without values (I get 'undefined').

Here is the code from demo. What I have to change to make it run with newer version of jquery?

    <form class="form-horizontal">
            <h2>Example 1: Basic List</h2>
            <div class="control-group">
                <label class="control-label">Party</label>
                <div class="controls">
                    <input name="partyName" type="text" placeholder="Party Name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Guest List</label>
                <div id="example1" class="controls">
                    <div class="list-item">
                        <input name="guestList[0].name" type="text" placeholder="Guest Name">
                        <a href="#" class="list-remove btn btn-small"><i class="icon-minus"></i> Remove Guest</a>
                    </div>
                    <a href="#" class="list-add btn btn-small"><i class="icon-plus"></i> Add Guest</a>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
                </div>
            </div>
        </form>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

   <script src="https://github.com/ikelin/jquery.dynamiclist/blob/master/jquery.dynamiclist.min.js"></script>
        <script>
            (function($) {
                $(document).ready(function() {
                    $("#example1").dynamiclist();

                    // display form submit data
                    $("form").submit(function(event) {
                        event.preventDefault();
                        var data = "";
                        $(this).find("input, select").each(function() {
                            var element = $(this);
                            if (element.attr("type") != "submit") {
                                data += element.attr("name");
                                data += "="
                                data += element.attr("value");
                                data += "; "
                            }
                        });
                        alert(data);
                        location.reload(true);
                    });
                });
            })(jQuery);
        </script>

Answer 1

Simply change element.attr("value"); to element.val(); .

Sorry I had to include the plugin code manually because apparently you cannot include the src directly from github. Also commented the reload for the snippet.

  <form class="form-horizontal"> <h2>Example 1: Basic List</h2> <div class="control-group"> <label class="control-label">Party</label> <div class="controls"> <input name="partyName" type="text" placeholder="Party Name"> </div> </div> <div class="control-group"> <label class="control-label">Guest List</label> <div id="example1" class="controls"> <div class="list-item"> <input name="guestList[0].name" type="text" placeholder="Guest Name"> <a href="#" class="list-remove btn btn-small"><i class="icon-minus"></i> Remove Guest</a> </div> <a href="#" class="list-add btn btn-small"><i class="icon-plus"></i> Add Guest</a> </div> </div> <div class="control-group"> <div class="controls"> <input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/> </div> </div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> /* jQuery Dynamic List v 2.0.1 / Copyright 2012 Ike Lin / http://www.apache.org/licenses/LICENSE-2.0.txt */ (function(a){a.fn.dynamiclist=function(d){if(this.length>1){this.each(function(){a(this).dynamiclist(d)});return this}var g=a.extend({itemClass:"list-item",addClass:"list-add",removeClass:"list-remove",minSize:1,maxSize:10,withEvents:false,addCallbackFn:null,removeCallbackFn:null},d);var f=function(o,n,j){var m=o.find("."+j.itemClass).length;if(m<j.maxSize){var l=o.find("."+j.itemClass+":first").clone(j.withEvents);l.find("."+j.removeClass).show().click(function(p){e(o,a(this),p,j)});b(l,m);i(l);var k=o.find("."+j.itemClass+":last");k.after(l);if(j.addCallbackFn!=null){j.addCallbackFn(l)}}if(n!=null){n.preventDefault()}};var e=function(o,k,n,j){var m=o.find("."+j.itemClass).length;var l=k.parents("."+j.itemClass+":first");if(m==j.minSize){i(l)}else{l.remove()}c(o,j);if(j.removeCallbackFn!=null){j.removeCallbackFn(l)}n.preventDefault()};var b=function(j,k){j.find("label, input, select, textarea").each(function(){var m=["class","name","id","for"];for(var n=0;n<m.length;n++){var l=a(this).attr(m[n]);if(l){l=l.replace(/\\d+\\./,k+".");l=l.replace(/\\[\\d+\\]\\./,"["+k+"].")}a(this).attr(m[n],l)}})};var c=function(k,j){k.find("."+j.itemClass).each(function(){var l=k.find("."+j.itemClass).index(this);b(a(this),l)})};var i=function(j){j.find("input[type=text], textarea").val("");j.find("input[type=radio]").attr({checked:false});j.find("input[type=checkbox]").attr({checked:false})};var h=function(k){k.find("."+g.itemClass+":first ."+g.removeClass).hide();var j=k.find("."+g.itemClass).length;while(g.minSize>j){f(k,null,g);j++}k.find("."+g.addClass).click(function(l){f(k,l,g)});k.find("."+g.removeClass).click(function(l){e(k,a(this),l,g)});return k};return h(this)}})(jQuery); </script> <script> (function($) { $(document).ready(function() { $("#example1").dynamiclist(); // display form submit data $("form").submit(function(event) { event.preventDefault(); var data = ""; $(this).find("input, select").each(function() { var element = $(this); if (element.attr("type") != "submit") { data += element.attr("name"); data += "=" data += element.val(); data += "; " } }); alert(data); //location.reload(true); }); }); })(jQuery); </script>