OnClick event doesn't work for values over 10 entries

Question

Javascript - yadcf filter OnClick event don't work after:

• after 10 rows entries
• in this situation: you load html page, you have X1 tag between 1-10 entries and X2 tag after 10 entry. If you filter using onclick event filtering by X you have: X1 tag is working if you using onclick event but X2 doesn't work if you using onclick event because X2 originally was, at the time of loading the page html, over 10 entry

This is my javascript code:

    var oTable;
$(document).ready(function(){
  oTable = $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 3,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 1, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag", filter_type: "auto_complete"}]);

 $(".label.lightblue" ).on( "click", function() {
      yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);

    });

        $(".label4.lightblue4" ).on( "click", function() {
      yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);

    });

     $(".label2.lightblue2" ).on( "click", function() {
      yadcf.exFilterColumn(oTable, [[2, $(this).text()]]);

    });
});

Live example on jsfiddle: http://jsfiddle.net/chcLmmps/

Answer 1

The tags (labels) are being added dynamically and hence they do not have events attached to them. Instead of .click() use .on like this .

$('#example').on('click',".label.lightblue", function () {
    alert('onclick label');
    yadcf.exFilterColumn(oTable, [
        [4, $(this).text()]
    ]);
});

And the same way for .label4.lightblue4 and .label2.lightblue2

Here is a DEMO

Hope this helps.