jquerydynatable

Add a class to a row on a dynatable table, but after a search they are gone


I want to add a class("fila_art") to every row in a dynatable table so when i click on them another one is added("marcar"). I tried this:

$('#tableId').dynatable({
    table: {
        defaultColumnIdStyle: 'camelCase'
    }
}).bind('dynatable:afterProcess', processingComplete());

function processingComplete (){
        $("#tableId").children("tbody").children().addClass("fila_art");
}

$( ".fila_art" ).live("click", function() {
    $(".fila_articulo").removeClass("marcar");
    $(this).addClass("marcar");
});

But when i make a search on the table the code stop working and i can't add the class("marcar") anymore. I checked the code after the search and the class "fila_art" was not added anymore. Any ideas? Sorry about the spelling.


Solution

  • jsFiddle Example

    var processingComplete = function(){
        $("#tableId").children("tbody").children().addClass("fila_art");
    };
    
    $('#tableId').dynatable({
        table: {
            defaultColumnIdStyle: 'camelCase'
        }
    }).bind('dynatable:afterProcess', processingComplete);
    
    processingComplete();
    
    $('body').on('click', '.fila_art' ,function(){
        $(".fila_art").removeClass("marcar");
        $(this).addClass("marcar");
    });
    

    From jQuery Documentation: on()

    If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event

    Placing the selector .file_art as a parameter designates it as a delegated event.