如何阻止由 jquery 插件添加的锚点以角度重定向？答案

【问题标题】：How to stop anchors, added by a jquery plugin, from redirecting in angular?如何阻止由 jquery 插件添加的锚点以角度重定向？
【发布时间】：2014-08-30 02:35:51
【问题描述】：

我的客户坚持要我使用我从 CodeCanyon 购买的名为“Social Wall Stream”的 jQuery 插件。它使用同位素创建动态互动墙，其中包含来自多个社交媒体网站的帖子。

为了包含这个插件，我已经加载了所有必需的文件（在 jquery 和 angular 之后）并创建了以下指令来加载它：

angular.module('app').directive('socialWall', function($timeout){
    return {
        restrict: 'E',
        replace: true,
        link: function($scope, element, attrs){

        // Load the social stream plugin on our element
        angular.element(element).dcSocialStream({
            // irrelevant api configuration
        });
    }
});

然后在我要显示社交墙的页面上，我在模板中添加了以下html标签：

<social-wall></social-wall>

该插件按预期呈现社交墙，除了与引导程序的 css 冲突之外，它看起来不错。

现在，当我单击过滤器（facebook、twitter 等的锚点，所有已激活的社交媒体网站）而不是过滤同位素布局时，它会将用户重定向到锚点的 url（即“#filter”，其中被重定向回我的主页，因为它不存在）。

该插件附带以下代码，在加载到启用同位素布局和过滤器工具栏的核心插件之前应包含这些代码。

/* Isotope minified plugin code */

jQuery(window).load(function(){

    var filters = {}, $container = jQuery('.stream');

    jQuery('.filter a').click(function(){
        var $i = jQuery(this), isoFilters = [], prop, selector, $a = $i.parents('.dcsns-toolbar'), $b = $a.next(), $c = jQuery('.stream',$b);

        jQuery('.filter a',$a).removeClass('iso-active');
        $i.addClass('iso-active');
        filters[ $i.data('group') ] = $i.data('filter');
        for (prop in filters){
            isoFilters.push(filters[ prop ])
        }
        selector = isoFilters.join('');
        $c.isotope({filter: selector, sortBy : 'postDate'});
        return false;
    });
});

这段代码看起来是为了停止重定向（返回 false），但由于 angular 的路由，$(window).load() 从未被触发。

顺便说一句，我正在使用 Angular-UI-Router，也许这是相关的。

所以我知道我需要找到一些解决方法来使上述代码的角度友好，但我不确定如何。

我尝试了什么：

创建一个指令，等待社交墙加载完毕，然后查找元素并向其添加单击事件侦听器，以使用 preventDefault() 阻止重定向发生。

这行得通，加载社交墙时触发了指令，但从未触发过点击事件。

创建一个停止重定向的指令（限制：a）。然后将其添加到 jQuery 插件添加的锚点中（编辑核心）。

但这些指令从未被触发，可能与 $compile 函数有关。还不知道角度。但我知道 Angular 没有处理插件添加的元素。

我希望我已经提供了足够的信息，我希望有人知道我该如何解决这个问题。还是我应该放弃并用角度重写整个代码？但不要认为时间是值得的。

提前致谢

【问题讨论】：

问题是click处理程序不是为处理动态元素而设计的……你需要使用event delegation like..jQuery(document).on('click', '.filter a', function(){})而不是jQuery('.filter a').click(function(){})
你是对的，我已经做出了你建议的改变，现在点击事件被触发了。唯一的问题；链接没有被 e.preventDefault() 停止或返回 false。它仍然重定向：S

标签： javascript jquery angularjs plugins directive

【解决方案1】：

好的，所以我找到了解决此问题的方法。这不是我想要的，但它确实有效，所以我会继续使用它。

我编辑了插件的核心，并从插件注入的锚点中删除了 href="#target" 属性。我添加了一个自定义类来监听。

然后在 css 中，我将以下样式添加到锚点和其中的 img：

cursor: pointer;

让它看起来像它有一个href时一样。

所以现在它不再重定向并像我想要的那样过滤同位素布局。

感谢 Arun P Johny 的回复！

【讨论】：