Question

I am using the following code:

   $('#dataTable .select-topic')
        .click(function () {
            if ($(this).attr('data-list') == "N") {
                $(this).attr('data-list', 'Y')
                var topicSelectHtml = $('#TopicID')
                .clone()
                .find("optgroup:first").remove().end()
                .find("option[value$='**']").remove().end().html();
                $(this).html(topicSelectHtml);
                $(this).attr('data-clicked', 'Y')
            }
        })
        .change(function () {
            $(this).attr("title", $("option:selected", this).text());
            var type = $(this).attr('id').split('_')[1];
            updateField(entity, $(this), type);
        })

It’s applied to a few hundred rows as each row has a select. For efficiency would it be better for me to create named functions and attach these to the click and change. If so then how could I do this for the above code?

Answer 1

Whether the function is named or not won’t really affect performance. Rather than creating and binding hundreds of different instances of the functions, however, it might be better to just create a delegated event handler once and bind that to the parent:

$('#dataTable').on('click', '.select-topic', function() {
    if ($(this).attr('data-list') == "N") {
        $(this).attr('data-list', 'Y')
        var topicSelectHtml = $('#TopicID').clone().find("optgroup:first").remove().end().find("option[value$='**']").remove().end().html();
        $(this).html(topicSelectHtml);
        $(this).attr('data-clicked', 'Y')
    }
}).on('change', '.select-topic', function() {
    $(this).attr("title", $("option:selected", this).text());
    var type = $(this).attr('id').split('_')[1];
    updateField(entity, $(this), type);
});​

This will handle clicks on the same elements, but with only a single function being bound, which will help performance.