如何使 jquery.dynamiclist 与较新版本的 jquery 一起运行？

Question

我想在我的项目中使用jquery.dynamiclist 库。 在运行顺利的演示页面中，有一个 1.8.2 版本的 jquery 库。 在我的项目中，我使用 1.11.1 版本，这使得动态列表插件不起作用。 使用较新版本时，当我处理表单时，我会得到带有输入名称但没有值的数据（我得到“未定义”）。

这是来自演示的代码。 我必须进行哪些更改才能使其与较新版本的 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

只需将element.attr("value"); 更改为element.val();。

抱歉，我必须手动包含插件代码，因为显然您不能直接从 github 包含 src。还评论了sn-p的重新加载。

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