How to change passed variable inside event handler

debugcn Published at Dev

Bartłomiej Sobieszek

I would like to know if there is a way to change "external" variable with handling the event

function generateHTML()
{
    var html = '';

    // Some html generating code
    html += '<b>John Doe</b>';

    $(document).trigger('html:generating', html);

    // Do more hardcoded stuff with html

    $(document).trigger('html:generated', html);

    return html;
}

$(document).on('html:generating', function(e, html) {
    html = '<span>' + html + '</span>';
});

$(document).on('html:generated', function(e, html) {
    console.log(html);  // prints <b>John Doe</b>
                        // expected <span><b>John Doe</b></span>
});

generateHTML();

This would be very useful when handling Mustache (or any other template library) dynamic html code.

Kamyar Infinity

If you are talking about passing html by reference, there is a way to do it. Everything you pass as a function argument is passed by value, but if you pass an object, the object properties still point to the original values, as the pointers are copied. So, you could do something like this:

function generateHTML()
{
    var container={html: ''};

    // Some html generating code
    container.html += '<b>John Doe</b>';

    $(document).trigger('html:generating', container);

    // Do more hardcoded stuff with html

    $(document).trigger('html:generated', container);

    return container.html;
}

$(document).on('html:generating', function(e, container) {
    container.html = '<span>' + container.html + '</span>';
});

$(document).on('html:generated', function(e, container) {
    console.log(container.html);
});

generateHTML();

Collected from the Internet

Please contact [email protected] to delete if infringement.