1

我有一个动态填充的项目列表：

     function ViewData(data) {
        var SI = (typeof data) == 'string' ? eval('(' + data + ')') : data;
        $('#ListContainer').empty();
        for (var i = 0; i < SI.length; i++) {
            var text = '<a href="Page.htm" rel="external" onclick= "SaveData();"
                         class="lesson" LessonID="' + SI[i].lessonID 
                         '"><span class="lesson_subject">' + SI[i].sbj_Name + 
                         '</span></b></a>
            $('#ListContainer').append(text).trigger("create");
        }
    }

当其中一个项目被点击时，页面应该导航到另一个带有该链接数据的页面。

我做了这个函数来保存在链接中找到的值：

function SaveData() {
        localStorage["LessonID"] = $('#ListContainer').find('.lesson').attr('LessonID'); 
        localStorage["SubjectName"] = $('#ListContainer').find('.lesson_subject').text();
        }

但它保存了“所有数据”。我只想保存所选项目的数据。你有什么想法 ？谢谢。

4

3 回答 3

5

它保存了所有数据，因为您find('.lesson')会在其中找到每个链接#ListContainer。我建议删除您的内联事件处理程序并通过以下方法利用事件委托on：

$("#ListContainer").on("click", ".lesson", function() {
    localStorage["LessonID"] = $(this).data("lessonid");
    localStorage["SubjectName"] = $(this).data("subject");
});

请注意，我使用的是data方法而不是attr. 这将需要对您的标记进行另一次更改：

<a href="Page.htm" rel="external" class="lesson" data-lessonid="someID" data-subject="someSubject">

这使用 HTML5data-*属性，这是在元素上存储任意数据时推荐的方法。

为什么要使用事件委托？它更有效，因为它导致绑定到元素的事件处理程序更少。不是每个a.lesson元素上都有一个，而是元素上只有一个#ListContainer。

因为大多数 DOM 事件会在树中冒泡，所以单击 的后代#ListContainer会在 DOM 树中冒泡，最终到达#ListContainer. jQueryon方法将在该元素处获取事件，并检查它是否源自匹配的元素.lesson。如果是这样，它将执行事件处理程序。

于 2012-06-12T08:04:54.340 回答
3

改变这个

onclick= "SaveData();"

至

onclick= "SaveData(this);"

然后将saveData函数更改为

function SaveData(elem) {
        localStorage["LessonID"] = $(elem).attr('LessonID'); 
        localStorage["SubjectName"] = $(elem).find('.lesson_subject').text();
        }

或者更好的是，您可以$.on像@James Allardice 在他的回答中显示的那样使用。

于 2012-06-12T08:06:28.823 回答
1

您正在混合旧世界的 JavaScript 和 jQuery。

用于$("<a ...")创建您的元素，附加它，然后附加一个可以$(this)在触发时使用的 .click 处理程序。当您添加 .click 处理程序可以使用的元素时，使用 .data 向元素添加数据。

于 2012-06-12T08:05:41.023 回答