Question

我正在使用 ng-repeat 重复一些显示记录列表的 div 。

问题：我想要做的是当用户点击记录弹出窗口时应该打开。 ng-repeat 工作正常，但问题是jQuery点击事件不适用于 ng-repeat 中的元素。

HTML代码：

<div data-ng-controller="AlbumCtrl">
  <div data-ng-repeat="z in songInfo">
    <div data-ng-repeat="b in z.tracks">
      <div class="border-bottom clearfix">
        <ul class="social-icon">
          <li class="share-popup"><a class="share-song-icon"></a>
            <ul class="popup">
              <li><a class="share-facebook">Facebook</a></li>
              <li class="last"><a class="save">Twitter</a></li>
              <div class="cancel"><a>Cancel</a></div>
            </ul>
          </li> 
        </ul>
      </div>
    </div>
  </div>
</div>

JQuery：

$('.share-popup').click(function(e) {  
  e.stopPropagation();
  $(this).children().toggleClass('active');
});

当我将div放在 jQuery 之外时， ng-repeat 点击事件正常工作。

任何帮助都会非常值得注意。感谢。

Answer 1

问题是ng-repeat动态呈现所有div，并且您在开始时绑定jQuery事件，那时{DOM}没有呈现share-popup类元素，这就是为什么这些事件不会出现在＆＃39 ; t附加该元素。您需要编写自己的自定义指令，该指令将限制类和＆amp;当class元素在DOM上呈现时，这个指令link函数将被触发＆amp;活动将得到附加。

<强>指令

app.directive('sharePopup', function(){
    return{
       restrict: 'C',
       link: function(scope, element, attrs){
          element.on('click', function(e){
              e.stopPropagation();
              element.children().toggleClass('active');
          })
       }
    }
})

更好的解决方案是在元素中使用ng-class，通过以更有棱角的方式执行代码会更有意义。然后，您不需要编写将在UI上处理的任何外部Javascript代码。

<强>标记

＆＃13;

<div class="border-bottom clearfix">
  <ul class="social-icon">
    <li class="share-popup" ng-click="b.active!=b.active; $event.stopPropagation();">
      <a class="share-song-icon" ng-class="{active: b.active}"></a>
      <ul class="popup">
        <li><a class="share-facebook">Facebook</a></li>
        <li class="last"><a class="save">Twitter</a></li>
        <div class="cancel"><a>Cancel</a></div>
      </ul>
    </li> 
  </ul>
</div>

＆＃13;

Answer 2

问题是您在绘制模板之前绑定了事件。

这是一个普遍的问题，每个角上工作的人都面临着。您应该使用ng-click或者如果要使用jQuery单击，则使用

更新代码

$('.share-popup').on("click", function(e)
    {  
            e.stopPropagation();
        $(this).children().toggleClass('active');
        });

Answer 3

当我们使用ng-repeat并需要触发jquery点击事件时，试试这个对我有用。

$(document).on("click", ".className", function() {

//your code here...

});

jQuery函数不能与ng-repeat一起使用

3 个答案: