Can't get access to the clicked element

Question

I have input search and table, that generates automatically if I change input.

<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 script for generating data in table is:

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

I also have code, that shows table when input.value != 0

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

Everything works good, but I can't get access to element .fa.fa-plus when it's clicked. The only two ways, that work are putting $(".fa.fa-plus").click(function(){}); in bind event or creating function outside window.onload that will work if I put in HTML file onclick for .fa.fa-plus element.

First method is bad, because if I change input more than one time, click function will work every time, even if I didn't click on this element.

Second method also isn't appropriate because I need to know index of clicked element.

Can anybody advise me a solution?

UPD Sorry for interruption, I solved this problem. I changed the version of Jquery to 2.2.2 and now it's working. Thanks for helping!

Answer 1

You may want to try to attach the event handler to the document but filtering on your selector. In this way even if the inner DOM changes, your handler will always intercept the event triggered by elements having the class fa fa-plus

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

As @mhodges pointed out, this is a delegated event.