离子列表中的图标不可点击

Icon in ionic list is not clickable

本文关键字：图标 列表      更新时间：2023-09-26

我有一个列表在我的ionic项目与一些图标，我想点击。但是我无法通过html的onclick()或AngularJS的ng-click来获取点击。我的html看起来像这样:

<ion-view view-title="CUES - WATCH LIST">
  <ion-content>
    <div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
    <ion-list>
      <ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
        <div class="watchlist-movie-thumb">
          <img class="movie-thumb-image" src="{{watchlistitem.picture}}">
        </div>
        <div class="col-75 watchlist-title-genre-container">
          <div class="watchlist-movie-title">
            {{watchlistitem.title}}
          </div>
          <div class="watchlist-movie-genres">
            {{watchlistitem.genres}}
          </div>
        </div>
        <a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
          <i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
        </a>
        <a class="item-icon-right">
          <i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
        </a>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

事实上，即使onclick()也没有拾取点击，这是非常奇怪的。我已经尝试将z索引更改为9999，但这没有任何区别。

我尝试了所有我能想到的html模型，偶然发现了一个答案。

这有点夸张，但不会影响布局。

我只是给标签添加了一个margin-right样式，如下所示:

<a class="item-icon-right">
    <i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>

对于修复点击问题，我给margin-right赋什么值似乎并不重要，只要它在那里。不过它确实会像你期望的那样改变布局。

相关文章：