1

I have this class in which I am using a jQuery inside but I can not get it to work. I know where the issue is. It is in the line this.clicked_ac_list = $( this ). How can I access the selected dynamic element .ac-list?

//class to manage filter
function filter( ){
    this.keyword = { word:"", matching:"" };// matching exact, prefix, infix
    this.category = "";
    this.filters = [ ];// an array of {key:"",value:""}


    this.ac_results = $( ".ac-container .ac-results" );

    this.ac_results.on( "click" , ".ac-list" , function( ){

        //the issue is in this line
        this.clicked_ac_list = $( this );

        this.category = this.clicked_ac_list.attr( "data-category" );
        this.keyword.word = this.clicked_ac_list.attr( "data-keyword" );

        console.log( this.category );
        console.log( this.keyword );

    }.bind( this ) );


}


var filter = new filter();
Sami Al-Subhi
  • 4,406
  • 9
  • 39
  • 66
  • if you try to get the evet like this, `this.ac_results.on( "click" , ".ac-list" , function(e){` don't you get `e.currentTarget` as the `ac-list` you clicked on? – Panther Sep 29 '19 at 10:43
  • Either use an arrow function and use the event parameter, or save the outer `this` in a variable first – CertainPerformance Sep 29 '19 at 10:44
  • @Panther It worked! I used `this.ac_results.on( "click" , ".ac-list" , function( e ){` and then `this.clicked_ac_list = $( e.currentTarget )`. Thank you! would like to put it in answer so I can accept it and close the question. – Sami Al-Subhi Sep 29 '19 at 10:48

0 Answers0