使用 jQuery 库 1.10.2 与使用 1.7.2 时的问题答案

【问题标题】：issue when using jQuery library 1.10.2 vs. fiddle with 1.7.2使用 jQuery 库 1.10.2 与使用 1.7.2 时的问题
【发布时间】：2014-02-13 22:40:46
【问题描述】：

在这个项目中，用户可以添加和编辑标签。有一个标签容器、一个编辑文本框和按钮，以及一个添加文本框和按钮。我有一个跟踪更改的选择列表，其索引中包含标签的数据库 ID。

当我使用我的 jQuery 库版本 (1.10.2) 运行我的代码时，标签按钮之间的点击不会一直影响列表。实际上，只有第一个按钮单击会更改列表中的选定项。

当我将此代码应用到一个比我的 jQuery 库 (1.7.2) 低的小提琴时 - 该列表会按照我的预期响应，在您单击标签按钮时更改其选定的项目。

这是我的代码以及工作小提琴。在 fiddle 中切换 jQuery 库会演示这个问题：

HTML：

        <!-- tags container -->
        <div class="container_12">
            <div class="grid_2"><img src="images/spacer.png" /></div>
            <div id="content" class="grid_8">
                <button id="PHP" name="PHP" class="tag-button">PHP</button>
                <button id="CSS" name="CSS" class="tag-button">CSS</button>

            </div>
            <div class="grid_2"><img src="images/spacer.png" /></div>
        </div>
        <!-- tags container end -->

        <!-- action buttons container -->
        <div class="container_12 action-bar">
            <div class="grid_4"><img src="images/spacer.png" /></div>
           <div id="action-add">
                <input type="text" name="newTag" id="newTag" />
                <input type="button" id="add" value="Add tag" />
            </div>
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-edit">
                <input type="text" name="editTag" id="editTag" />
                <input type="button" id="update" value="Update tag" />
            </div>
        <!-- action buttons container end -->
        </div>

        <!-- Real Time list container -->
        <div class="container_12">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <select id="insertString">
                <option value="0">PHP</option>
                <option value="1">CSS</option>
            </select>
        </div>
        <!-- real time list container end -->

jQuery:

       //button add click
        $('#add').click(function() {
            //creating a new tag for the tag bar
            var tag = $('#newTag').val();
            var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>');
            var qString = "";
            // adding the tag to the bar
            $("#content").append(tagHTML);

            //get last value in the list
            var lastValue = $('#insertString option:last-child').val();
            if (! lastValue) {lastValue = 0;}
            else {lastValue = ++ lastValue; }
            //add new option for the new tag
            $('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString")
        })

        //tag button click
        $("#content").on("click", ".tag-button", function(){
            var name = $(this).attr('name');

            //add the tag name to the editTag textbox
            $('#editTag').val(name);

            $('#insertString option:contains("'+ name + '")').attr('selected', true);
        });

        //update button click
        $('#update').click(function() {
            //get the name of the edited tag in the list
            var tagName = $('#insertString').find(':selected').text();
            var tagNew = $('#editTag').val();

            //change the corresponding buttons name, id and text
            $('#' + tagName).text(tagNew);

            $('#' + tagName).attr({
                name: tagNew,
                id: tagNew
            });

            //change option in the list
            $('#insertString option:selected').text(tagNew);

        })

还有小提琴：

http://jsfiddle.net/gWnu5/1/

有没有办法让这段代码在我的 jQuery 版本上运行？

感谢您的帮助

【问题讨论】：

attr vs prop 是你的问题。阅读jquery.com/upgrade-guide/1.9
感谢凯文，感谢您的尊重。我不确定这实际上是一个错误还是什么。在谷歌上搜索它并没有让我得到任何东西......我可能没有适当地表达搜索。再次感谢您的尊重:)
您将从 1.7.2 升级到 1.10 的事实确实使查找文档变得困难，因为没有 1.10 升级指南。

标签： jquery

【解决方案1】：

由 Kevin B 回答，真的。这是一个 prop 与 attr 的问题 - 更新了我的代码以适应最新的 jQuery 核心库，一切都很好。注意链接是：http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

JQuery 对我来说是全新的，这是非常宝贵的信息。传递下去。

【讨论】：