jQuery的单击事件不与angular.js NG-重复工作 [英] jquery click event is not working with angular.js ng-repeat

问题描述

我有一个嵌套（三级）菜单背面有一个jQuery click事件清单。单击菜单项时jQuery的点击不火。 jQuery的活动效果很好，如果HTML里面的值是静态的。

HTML

 ＆LT; D​​IV＆GT;
＆LT; UL类=可折叠列表NG控制器=ViewCtrl＆GT;
    ＆LT;李班=可折叠列表-subnavNG重复=鉴于意见＆GT;
        ＆所述;类别=可折叠列表父＆GT; {{view.name}}＆下; / A＆GT;
        ＆LT; UL类=可折叠列表二次＆GT;
            ＆LT;李班=可折叠列表-subnav＆GT;
                ＆LT;一类=可折叠列表父＆GT;公众意见＆LT; / A＆GT;
                ＆LT; UL类=可折叠列表三级＆GT;
                    ＆LT;李NG重复=publicview在view.publicviews＆GT;
                        ＆所述a取代; {{publicview.title}}＆下; / A＆GT;
                    ＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; /李＆GT;
            ＆LT;李班=可折叠列表-subnav＆GT;
                ＆LT;一类=可折叠列表父＆GT;私人浏览＆LT; / A＆GT;
                ＆LT; UL类=可折叠列表三级＆GT;
                    ＆LT;李NG重复=privateview在view.privateviews＆GT;
                        ＆所述a取代; {{privateview.title}}＆下; / A＆GT;
                    ＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

使用Javascript：

 定义（['角'，'控制器模块']，功能（角，
    控制器）{    controllers.controller（ViewCtrl，[
        $范围
        $ rootScope
        directiveBinder
        '$超时'，
        '$ stateParams'，
        '$资源'，
        '$州'，
        功能（$范围，$ rootScope，directiveBinder，$超时，$ stateParams，$资源，$州）{            $ scope.engines = [{
            名称：'名称1'，
            publicviews：[{
                标题：首次公开查看
            }]，
            privateviews：[{
                标题：第一个人视图
            }]
        }，{
            名称：'名2'，
            publicviews：[{
                标题：第二次公开查看
            }]，
            privateviews：[{
                标题：第二个专用视图
            }]
        }];        $（'。可折叠列表父'）。点击（函数（五）{
            亦即preventDefault（）;
            $（本）。接下来（）的slideToggle（快）。
            如果（$（本）.parent（）。hasClass（'开放'））{
                $（本）.parent（）removeClass移除（开放）。
            }其他{
                $（本）.parent（）addClass（开放）。
            }
        }）;
    }）;
 

解决方案

由于该元素被动态地添加NG-重复。点击事件不会绑定到他们。尝试使用 .delegate

  $（UL）.delegate（.collapsible列表父，点击，函数（）{
  // code在这里
}）;
 

I have a nested (tertiary) menu list with a jquery click event on the back. jQuery click does not fire when the menu item is clicked. The jQuery event works well if the values inside the HTML are static.

HTML:

<div>
<ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
        <a class="collapsible-list-parent">{{view.name}}</a>
        <ul class="collapsible-list secondary">
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Public Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="publicview in view.publicviews">
                        <a>{{publicview.title}}</a>
                    </li>
                </ul>
            </li>
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Private Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="privateview in view.privateviews">
                        <a>{{privateview.title}}</a>
                    </li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>

Javascript:

define([ 'angular', 'controllers-module'], function(angular,
    controllers) {

    controllers.controller("ViewCtrl", [
        "$scope",
        "$rootScope",
        "directiveBinder",
        '$timeout',
        '$stateParams',
        '$resource',
        '$state',
        function($scope, $rootScope,directiveBinder, $timeout, $stateParams, $resource, $state) {

            $scope.engines = [ {
            name : 'name1',
            publicviews : [ {
                title : 'First public View'
            } ],
            privateviews : [ {
                title : 'First private View'
            } ]
        }, {
            name : 'name2',
            publicviews : [ {
                title : 'Second public View'
            } ],
            privateviews : [ {
                title : 'Second private View'
            } ]
        } ];

        $('.collapsible-list-parent').click(function(e) {
            e.preventDefault();
            $(this).next().slideToggle('fast');
            if ($(this).parent().hasClass('open')) {
                $(this).parent().removeClass('open');
            } else {
                $(this).parent().addClass('open');
            }
        });
    });

解决方案

Because the elements are added dynamically by ng-repeat the .click event is not binded to them. Try to use .delegate

$( "ul" ).delegate( ".collapsible-list-parent", "click", function() {
  // code here
});

这篇关于jQuery的单击事件不与angular.js NG-重复工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！