如何使用jquery解析视图并将侦听器附加到“<a>&#39; tags?</a>

时间:2014-12-16 19:03:36

标签: jquery

我写了一些简单的代码来加载视图。当我加载视图时,我需要解析需要附加侦听器的<a>标记的视图。最初,我解析整个文档,但这会导致一些奇怪的错误,整个文档将被解析n次,其中n是我点击超链接的次数。非常奇怪的东西。现在我试图只解析内部视图。我怎样才能告诉jquery从我提供的jquery元素开始(我加载的视图)。

    $(document).ready(function () {
        var viewRoot = $("[view='']");

        function attachHyperLinkListener() {
            $('a').filter(function (index, element) {
                var href = $(this).attr('href');
                console.log('analyzing ' + href);
                if ( href.substring(0, 2) == "#/" ) {
                    console.log('attaching listener');
                    return (href.substring(0, 2) == "#/");
                }
                return false;
            }).click(function (e) {
                e.preventDefault();
                var href = $(this).attr('href').substring(2)
                loadPage(href);
                var stateObj = {'href' : href};
                window.history.pushState(stateObj, '', href);
            });
        }

        function loadPage(href) {
            console.log('loading ' + href );
            $.get(href, null, function (data) {
                var view = $.parseHTML(data)
                viewRoot.html(view);
                //attachHyperLinkListener(); // running this causes that strange error
               // how can I run $('a').click(...) on 'view' only?
            });
        }

        $(window).on('popstate', function (e) {
            loadPage(e.originalEvent.state.href);
        });

        window.history.pushState({'href':'/'}, '', ''); // push the original page
        attachHyperLinkListener();
    });
</script>

[edit]我认为错误的发生是因为同一个<a>标签上有n个侦听器。

1 个答案:

答案 0 :(得分:1)

viewRoot.on('click', 'a', function () {
    // here you go
});