Question

我输入了搜索和表格，如果我更改输入，则自动生成。

<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;
        });
    }       
});

我也有代码，在输入时显示表格。值！= 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之外创建函数，如果我为.fa.fa-plus元素添加HTML文件onclick将会有效。

第一种方法很糟糕，因为如果我多次更改输入，即使我没有点击此元素，点击功能也会每次都有效。

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

有人可以告诉我一个解决方案吗？

UPD 对不起中断，我解决了这个问题。我将Jquery的版本更改为2.2.2，现在它正在运行。谢谢你的帮助！

Answer 1

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

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

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

Answer 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 
}

以角度方式处理事件

无法访问点击的元素

2 个答案: