无法访问单击的元素答案

【问题标题】：Can't get access to the clicked element无法访问单击的元素
【发布时间】：2016-03-23 23:32:29
【问题描述】：

我有输入搜索和表格，如果我更改输入，它会自动生成。

<div class="search">
  <form action="" method="post" class="searchform" >
    <input type="search" name="" placeholder="Search" class="inputsearchform" ng-model="search"/>
    <input type="submit" name="" value="" class="submitsearchform" />
  </form>
</div>
<div class="songlist">
  <table id="songlistTableR" ng-app='test_table' ng-controller='main_control'>   
   <tr><th>Name</th><th>Link</th></tr>    
   <tr ng-repeat="data in loaded | filter:search">
     <td><i class="fa fa-plus"></i>{{data.song_name}}</td>
     <td><a href="{{data.link}}" target='_blank'>Youtube</a></td>     
   </tr>
 </table>      
</div>

生成表格数据的JS脚本是：

var app = angular.module('test_table', []);
var n = [];
app.controller('main_control',function($scope,$http, $rootScope){
    load();
    function load(){
        $http.get("http://localhost:7001/load").success(function(data){
            $rootScope.loaded=data; 
            n = data;
        });
    }       
});

我也有代码，当 input.value != 0 时显示表格

$('.inputsearchform').bind('input', function() {
    if($(this).val() == 0){
        songlistTableR.style.visibility = 'hidden';
    }
    else{
        songlistTableR.style.visibility = 'visible';
    }   
});

一切正常，但单击元素.fa.fa-plus 时我无法访问它。仅有的两种方法是将$(".fa.fa-plus").click(function(){}); 放入bind 事件或在window.onload 之外创建函数，如果我将HTML 文件中的.fa.fa-plus 元素放在onclick 中，这将起作用。

第一种方法不好，因为如果我多次更改输入，点击功能每次都会起作用，即使我没有点击这个元素。

第二种方法也不合适，因为我需要知道点击元素的index。

谁能告诉我一个解决方案？

UPD抱歉打扰了，我解决了这个问题。我将Jquery 的版本更改为2.2.2，现在它可以工作了。感谢您的帮助！

【问题讨论】：

如果你使用 angular，你真的应该用 angular 来处理点击事件。在许多情况下，使用 jQuery 处理 Angular 也处理的事件会导致问题。是的，有例外，绝对可以做到，但是在这种情况下，您绝对应该使用@Vanojx1的解决方案。

标签： javascript jquery html angularjs

【解决方案1】：

您可能想尝试将事件处理程序附加到document，但在您的选择器上进行过滤。这样，即使内部 DOM 发生变化，您的处理程序也将始终拦截由具有类 fa fa-plus 的元素触发的事件@

$(document).on("click",".fa.fa-plus", function(){});

正如@mhodges 指出的，这是delegated event。

【讨论】：

这称为事件委托，仅供参考。这里的文档：learn.jquery.com/events/event-delegation
不幸的是，它不起作用。我试图把它放在window.onload 和外面，但是我有一个错误：$(...).on is not a function，即使我包含了 jquery（顺序：jquery > angular > main script）
确保jquery包含在之前这一行

【解决方案2】：

尝试改变这一点：

<td><i class="fa fa-plus"></i>{{data.song_name}}</td>

与：

<td><a ng-click="doSomething($event)" ><i class="fa fa-plus"></i>{{data.song_name}}</a></td>

然后在控制器中：

$scoope.doSomething() = function(event){
     do what you need 
}

仅以角度方式处理事件

【讨论】：