Question

我想在我的程序中使用jquery.dynamiclist库。在运行流畅的演示页面中，版本1.8.2中有一个jquery库。在我的项目中，我使用版本1.11.1，这使得dynamiclist插件不起作用。当我处理表单时使用更新的版本我获得了带有输入名称但没有值的数据（我得到'未定义'）。

以下是demo的代码。我必须改变什么才能使它运行更新版本的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。还评论了片段的重新加载。

＆＃13;

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

＆＃13;

如何使用更新版本的jquery运行jquery.dynamiclist？

1 个答案: