Question

I have the following function to delete a row. I would like to reuse this function by passing in the #search_result.

function row_delete_ajax(event) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
    var url = $(this).attr("href") + "/";

        $.post(url, function(result){
            $('#search_result').empty();
            $('#search_result').append(result);
        });                
    }       
};

This is how I bind the function initially, But kind of stuck how to pass in #search_result to row_delete_ajax

$(document).ready(function (){  
    $('#search_result').find(".row_delete_ajax").click(row_delete_ajax);
}

Answer 1

Another way of doing it is to use the [eventData] parameter:

eventData: A map of data that will be passed to the event handler.

$(document).ready(function (){  
    // Create an object with all the properties you want.
    var data = { id: '#search_result' }; 

    // Pass the data object as the first parameter in the click-event.
    $('#search_result').find(".row_delete_ajax").click(data, row_delete_ajax);
});

And then use it like this:

function row_delete_ajax(event) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
    var url = $(this).attr("href") + "/";

        $.post(url, function(result){
            $(event.data.id).empty();
            $(event.data.id).append(result);
        });                
    }       
};

Also check event.data for example.