Zugriff auf das angeklickte Element nicht möglich

Question

Ich habe Eingabe-Suche und Tabelle, die automatisch generiert, wenn ich die Eingabe ändere.

<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 Skript für Daten in der Tabelle zu erzeugen ist:

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

ich auch Code haben, das Tabelle zeigt, wann input.value = 0

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

Alles gut funktioniert, aber Ich kann nicht auf das Element zugreifen, wenn darauf geklickt wird. Die einzigen zwei Möglichkeiten, die arbeiten sind $(".fa.fa-plus").click(function(){}); in bind Ereignis oder erstellen Funktion außerhalb window.onload, die funktionieren, wenn ich in HTML-Datei onclick für Element einfügen.

Erste Methode ist schlecht, denn wenn ich die Eingabe mehr als einmal ändere, klicken Sie auf Funktion funktioniert jedes Mal, auch wenn ich nicht auf dieses Element klicken.

Zweite Methode ist auch nicht geeignet, weil ich index des geklickten Elements wissen muss.

Kann mir jemand eine Lösung empfehlen?

UPD Sorry für die Unterbrechung, löste ich dieses Problem. Ich habe die Version Jquery auf 2.2.2 geändert und jetzt funktioniert es. Danke fürs Helfen!

Answer 1

Sie können versuchen, den Ereignishandler an die document anzuhängen, aber auf Ihren Selektor zu filtern. Auf diese Weise, selbst wenn die inneren DOM ändert, wird der Handler immer die durch Elemente ausgelöstes Ereignis abfangen die Klasse fa fa-plus

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

Wie @mhodges darauf hingewiesen haben, ist dies ein delegated event ist.

Answer 2

versuchen, dies zu ändern:

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

mit:

dann in der Steuerung:

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

nur Ereignisse in der Winkel Art und Weise behandelt