Question

I have a jQuery object, and I’m using .bind() method to assign an event to that object. However I’m also passing a reference to the object itself to the bind method as well like so:

$( document ).ready(function ()
{
    // Grab the jQuery version of the DOM element.
    var $formField1 = $( "#form-field-1" );
    // I should probably store this stuff in $formField1.data(),
    //  but not until I find out if this can cause a circular reference.
    var formFields = {
        "jQ": $formField1,
        "$comment": $( "#form-field-1-comment" ),
        "commentAnswers": [ 2, 4 ]
    };
    // Set up the comment to show when a certain answer is given.
    this.jQ.bind( "change", formFields, toggleComment );
});

function toggleComment( p_event )
{
    // Show/hide comments based on the answer in the commentAnswers array.
    if ( $.inArray($(this).val(), question.commentAnswers) > -1 )
    {
        question.$comment.parent().slideDown();
    }
    else
    {
        question.$comment.parent().slideUp();
    }
}

I want to know if this will “in fact” cause a circular reference?

Answer 1

It’s not a circular reference, but it is redundant. The object triggering the event will be available through this inside the event handler. It’s not necessary to pass it in.

However, it’s important to realize that the data passed into bind when it’s set is static. Whereas, this inside the event handler will always store the particular object that triggered the event. Those two objects may be the same or they may be different, depending on how widely the bind is applied.