带有类选择器的requirejs模块和jquery

刚开始使用requirejs，在将模块绑定到具有相同类名的多个元素时遇到了一些问题。看起来模块只绑定了一次，即绑定到第一个元素

href警报的所有锚点始终显示相同的值--第一个值

layout.html

script(type='text/javascript', src='/js/components/requirejs/require.js', data-main='/js/main')

list.html

script(type='text/javascript', src='/js/components/requirejs/require.js', data-main='/js/main')

列表页面有多个锚，所有锚都具有相同的类

<a href='/books/1' class='view'>View Me</a>
<a href='/books/2' class='view'>View Me</a>
<a href='/books/..' class='view'>View Me</a>
<a href='/books/5' class='view'>View Me</a>

require(['page/book']);

/page/book.js

require.config({
    paths: {
        jquery: 'components/jquery/jquery',
        domready: 'components/requirejs-domready/domReady'
    }
});

require(['jquery', 'domready'], function() { });

require(['main'], function () {
    require(['jquery', 'modules/Book'], function ($, Follow) {
        new Book($('.view'));
    });
});

define(function (require) {
    var $ = require('jquery');

    var Book = function (element) {
       var anchor = $(element);
       $(document).on('click', element, function (e) {
           e.preventDefault();
           alert(anchor.attr('href'));
       })
    };

    Book.prototype = {

    };

    return Book;
});

/modules/Book.js

require.config({
    paths: {
        jquery: 'components/jquery/jquery',
        domready: 'components/requirejs-domready/domReady'
    }
});

require(['jquery', 'domready'], function() { });

require(['main'], function () {
    require(['jquery', 'modules/Book'], function ($, Follow) {
        new Book($('.view'));
    });
});

define(function (require) {
    var $ = require('jquery');

    var Book = function (element) {
       var anchor = $(element);
       $(document).on('click', element, function (e) {
           e.preventDefault();
           alert(anchor.attr('href'));
       })
    };

    Book.prototype = {

    };

    return Book;
});

---

如何让它为单击的每个锚返回不同的href？

您需要处理与事件本身相关的元素

现在，您有了一个对jQuery集合

元素
/
锚点
的永久引用，因为闭包是与处理程序本身一起传递的

因此，当您调用
anchor.attr（'href'）
时，总是会得到集合中第一个元素的
href

处理
事件。目标为
：

var Book = function (element) {
   var anchor = $(element);
   $(document).on('click', element, function (e) {
       e.preventDefault();

       var $anchor = $(e.target);
       alert($anchor.attr('href'));
   })
};

这很有道理。不知道为什么我没有这样做，我通常会做var container=$（这个）；获取元素。上述方法也适用。