# Other Languages > jQuery >  [RESOLVED] CLICK Event THIS not working consistently - javascript question - using jQuery...

## szlamany

Ok - this I believe is really a javascript question - although I am using jQuery in the code...

So - I've got  an IMAGE - a STAR - that when you click it it runs an event called addstarClick() - see code in the images below.

If you click the star when nothing on the screen is selected - it runs the event and you see in the top of the attached image that *this, objWebParam, wesSave and wesThis* all look properly setup - and the code works from that point forward.

The bottom image shows the star getting clicked when the focus is in a TEXTBOX in that SLICKGRID row.   When addstarClick() fires you see that those same *this, objWebParam, wesSave and wesThis* variables all look "unselected" and thus undefined since they are not pointing to the correct star!  If I click the "value" of *this* it goes to a single line of html that appears disconnected from anything.  When you click the *this* in the first example FIREBUG brings you to the HTML you would expect that STAR to be within!!

At any rate - difference is that when you click the star with the textbox hot it runs the unwind code in this TextCellEditor - probably the isValueChanged, applyValue, serializeValue and the destroy...

I know this is one heck of a complicated post - but any assist on how to even debug it further would be greatly appreciated!!!



```
        TextCellEditor: function(args) {
            var $input;
            var defaultValue;
            var scope = this;

            this.init = function() {
                $input = $("<INPUT type=text class='editor-text' />")
                    .appendTo(args.container)
                    .bind("keydown.nav", function(e) {
                        if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                            e.stopImmediatePropagation();
                        }
                    })
                    .focus()
                    .select();
            };

            this.destroy = function() {
                $input.remove();
            };

            this.focus = function() {
                $input.focus();
            };

            this.getValue = function() {
                return $input.val();
            };

            this.setValue = function(val) {
                $input.val(val);
            };

            this.loadValue = function(item) {
                defaultValue = item[args.column.field] || "";
                $input.val(defaultValue);
                $input[0].defaultValue = defaultValue;
                $input.select();
            };

            this.serializeValue = function() {
                return $input.val();
            };

            this.applyValue = function(item, state) {
                item[args.column.field] = state;
            };

            this.isValueChanged = function() {
                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
            };

            this.validate = function() {
                if (args.column.validator) {
                    var validationResults = args.column.validator($input.val());
                    if (!validationResults.valid)
                        return validationResults;
                }
                return {
                    valid: true,
                    msg: null
                };
            };

            this.init();
        },
```

----------


## szlamany

Ok - this is resolved.

The SlickGrid - when it put the row back - appears to disconnect the star image from the DOM.  The event still fires - as I've shown - but the image is not in the DOM anymore so I cannot poll it for what row and such it is related to.

I did discover that the SlickGrid creation code I was using had an onCellChange event - when that happens I "store" the row and other info in some variables attached to the WINDOW object (some globals as they would be called in other languages).



```
function makeGrid(objGrid, sender, objWebParam) {
.
.
.
    wesPanel = $(strPanel);
.
.
.
    g_objGrid[intGO].onCellChange = function(currentRow, currentCell, item) {
        g_lastintGO = intGO;
        g_lastintRow = currentRow;
        g_lastwesPanel = wesPanel;
        toggleButton(true, $("#" + strPanelHeading + " .acs-panel-btn-save"));
        changeCell(currentRow, currentCell, item);
        if (g_objGrid[intGO].formula) {
            try {
                g_objGrid[intGO].formula(currentRow, currentCell, item);
            } catch (e) {
                errorMessage("onCellChange>formula", e);
            } finally {
            }
            this.updateRow(currentRow);
        }
    };
```

With that said - now if the STAR image is no longer attached to the DOM I know I can rely on those global variables to tell me which row was hot when the star was clicked.  If the star is on a row that is not "in a change" moment then that star is attached to the dom and I can poll it for information.  The only way the star can be detached is if the current row was "in a change" when the star was clicked...



```
function addstarClick(event) {
    if (g_blnInSproc) {
        alert("Processing - please wait!");
    } else {
        g_blnInSproc = true;
        var wesThis = $(this);
        var wesSave = wesThis.closest('.acs-panel-work').find('.acs-panel-btn-save');
        var objWebParam = {};
        var intGO = 0;
        var intRow = 0;
        if (wesSave.length == 0) {
            wesSave = g_lastwesPanel.find('.acs-panel-btn-save');
            objWebParam = g_lastwesPanel.closest('.acs-ddreflector').data('objWebParam');
            intGO = g_lastintGO;
            intRow = g_lastintRow;
        } else {
            objWebParam = wesThis.closest('.acs-ddreflector').data('objWebParam');
            intGO = wesThis.closest('.acs-ddreflector').data('objWebParam').gridoffset;
            intRow = parseInt(wesThis.closest(".slick-row").attr("row"), 10);   // and what row I am on
        }
        p_saveClick(wesSave, { addstar: true, nomsg: true, intGO: intGO, intRow: intRow });
        return false;
```

----------

