glypicon 上的点击事件 [英] Click event on glypicon
本文介绍了glypicon 上的点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将 ng-click 事件添加到文本框中的 bootstrap glyphicon?事件不会被触发...
<h3>如何在点击移除图标时清除模型?</h3><div class="容器"><div class="form-group has-feedback" ><input type="text" class="form-control" ng-model="mymodel"/><i class="glyphicon glyphicon-remove form-control-feedback"ng-show="mymodel" ng-click="mymodel = null"></i><p>这是我的模型:{{mymodel}}</p><strong ng-click="mymodel = null">这行得通...</strong>
解决方案
这是因为 glyphicons 提供了 "pointer-events: none;"默认情况下，您可以通过简单的 CSS 覆盖它并删除此功能:-)
.my .glyphicon {指针事件:全部；}<div class="form-group has-feedback my" ><input type="text" class="form-control" ng-model="mymodel"/><i class="glyphicon glyphicon-remove form-control-feedback"ng-show="mymodel" ng-click="mymodel = null"></i>How do I add a ng-click event to a bootstrap glyphicon in a textbox? The event doesn't get fired...
<body ng-app ng-init="mymodel='THIS IS MY MODEL'">
<h3>How to clear the model on remove icon click?</h3>
<div class="container">
<div class="form-group has-feedback" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
<p>This is my model: {{mymodel}}</p>
<strong ng-click="mymodel = null">This works tho...</strong>
</div>
</body>
解决方案
This is happening because glyphicons provided with " pointer-events: none;" as default you can override it and remove this functionality by simple CSS:-)
.my .glyphicon {
pointer-events: all;
}
<div class="form-group has-feedback my" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
这篇关于glypicon 上的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
