Jquery - binding click event to a variable

Question

All,

I am really stuck/ confused at this point.

I have an array with 6 items in it. Each item in the array is dynamically filled with elements using jquery '.html' method. However, I cannot seem to be able to attach/ bind an event to this dynamically created variable.

As soon as the browser gets to the problem line (see the area labeled 'PROBLEM AREA'), I get a 'undefined' error, which is really confusing as all the previous code on the very same variable works just fine.

var eCreditSystem = document.getElementById("creditSystem");
var i = 0;
var eCreditT = new Array(6);                    // 6 members created which will be recycled

function createCreditTransaction ()                 // func called when a transaction occurs, at the mo, attached to onclick()
{
    if (i < 6)
    {
        eCreditT[i] = undefined;                    // to delete the existing data in the index of array
        addElements (i);
    } else
    if (i > 5 || eCreditT[i] != undefined)
    {
         ...
    }
}

function addElements (arrayIndex)                   // func called from within the 'createCreditTransaction()' func
{
    eCreditT[i] = $(document.createElement('div')).addClass("cCreditTransaction").appendTo(eCreditSystem);
    $(eCreditT[i]).attr ('id', ('trans' + i));
    $(eCreditT[i]).html ('<div class="cCreditContainer"><span class="cCreditsNo">-50</span>&nbsp;<img class="cCurrency" src="" alt="" /></div><span class="cCloseMsg">Click box to close.</span><div class="dots"></div><div class="dots"></div><div class="dots"></div>');
    creditTransactionSlideOut (eCreditT[i], 666);                   // calling slideOut animation
    console.log(eCreditT[i]);     // this confirms that the variable is not undefined

/* ***** THE PROBLEM AREA ***** */
    $(eCreditT[i]).on ('click', function ()                 // if user clicks on the transaction box
    {
        creditTransactionSlideBackIn (eCreditT[i], 150);                    // slide back in animation
    });
    return i++;
}

I am wondering, could this have something to do with where the js file is loaded in the HTML doc from? I have the js file placed at the bottom of the body tag in HTML. — Kayote
– Kayote, Commented Nov 26, 2011 at 9:11
Second theory is that is it possible that by the time it gets to 'binding' the event to the variable, the browser has already read & implemented the 'return i++', which would mean that at that moment, the 'eCreditT[i]' has a different value for 'i' than previously? — Kayote
– Kayote, Commented Nov 26, 2011 at 9:30
Its worked! But I have no real idea of why it worked. When I commented the 'return i++' & ran the code, it worked. Now my problem is how do I implement the 'return i++' at the end of the function? — Kayote
– Kayote, Commented Nov 26, 2011 at 9:35
Try to add click event out of addElements() function and try once. — Kiran
– Kiran, Commented Nov 26, 2011 at 9:40
@Kiran, thankyou, that DID work. I actually had tried this before as well but I must have done something wrong then as its clearly working now. A million thanks. — Kayote
– Kayote, Commented Nov 26, 2011 at 9:53

Mahmoud Gamal · Accepted Answer · 2011-11-27 07:59:01Z

2

Try this:

$(eCreditT[i]).bind('click', function() {
   creditTransactionSlideBackIn(eCreditT[i], 150);
});

Edit: use ++i instead of i++ like this:

return ++i;
/*
or
i += 1;
return i;
*/

retrurn ++i performs the increment first then return i after the increment. While return i++ return i then icrement it.

edited Nov 27, 2011 at 7:59

answered Nov 26, 2011 at 8:42

Mahmoud Gamal

80.2k18 gold badges143 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kayote Over a year ago

Tried it already, doesn't work. eCreditT[i] is supposedly undefined.

Kayote Over a year ago

thanks & its supposedly resolved, however a new issue has arisen. Please have a look at the last comment to the original post.

Kayote Over a year ago

Oh wow, thanks! I didn't know the difference between ++i & i++. Did a search & apparently ++i returns the updates i while i++ doesn't, surely thats not the case in js as my functions are working correctly... ?

Kiran · Accepted Answer · 2011-11-26 09:56:17Z

1

Try to add click event out of addElements() function and try once.

answered Nov 26, 2011 at 9:56

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-11-26 09:45:04Z

1

Nonsense create an element using JavaScript and then use jQuery function to transform it into a jQuery object. You can let jQuery create the element directly for you.

eCreditT[i] = $('<div>').addClass("cCreditTransaction").appendTo(eCreditSystem);

Also, since eCretitT[i] is already a jQuery element, no need to call the jQuery function again.

eCreditT[i].on('click', function () {
    creditTransactionSlideBackIn(eCreditT[i], 150);
});

If you already tried on, bind, live and click methods, then maybe the called function is your problem. Try to put a console.log() or an alert() inside the function to make sure the click event is actually happening. If it happens then the function creditTransactionSlideBackIn() is your problem.

EDIT

The problem is when the event takes place, i is not the original variable anymore.

function addElements (arrayIndex)
{
    eCreditT[i] = $('<div>').addClass("cCreditTransaction").appendTo(eCreditSystem);
    eCreditT[i].attr ('id', ('trans' + i));

    eCreditT[i].data ('id', i);    // Store the id value to a data attribute

Then when you call the function you can refer to the data attribute instead of the i variable:

/* ***** THE PROBLEM AREA ***** */
    eCreditT[i].on ('click', function ()                 // if user clicks on the transaction box
    {
        creditTransactionSlideBackIn ($(this).data('id'), 150);                    // slide back in animation
    });
    return i++;
}

edited Nov 26, 2011 at 9:45

answered Nov 26, 2011 at 9:27

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

3 Comments

Kayote Over a year ago

Oh wow, thank you for the top tip. Implemented. Regarding the actual problem, I have it resolved... partly. It appears that the 'return i++' is at fault. Please see my last comment to my original post.

Jose Faeti Over a year ago

Edited with a proposed solution to store and retrieve the right id value at the right moment.

Kayote Over a year ago

thank you @Jose Faeti. Im looking into the data method for jquery.

vonsko · Accepted Answer · 2011-11-26 10:39:29Z

1

try to bind parent div and then use if($e.target).is('some')){}, it will act as .live, like this:

$(eCreditSystem).bind('click', function (e){
    if($(e.target).is('.cCreditTransaction')) {
        creditTransactionSlideBackIn ($(e.target), 150);              
    }
});

of course you'll need in a minute larger if for checking if clicked dom el is a child of .cCreditTransaction, like this:

if($(e.target).parents().is('.cCreditTransaction')){}

edited Nov 26, 2011 at 10:39

answered Nov 26, 2011 at 9:29

vonsko

3944 silver badges11 bronze badges

2 Comments

Kayote Over a year ago

Im a bit confused, would you please shed some more light on why/how binding parent div would help. Am reading up on '.live' & '.is' in the meantime :)

vonsko Over a year ago

edit ^^ ;) and you should put this lines outside addElements func, explanation is this: while you add element to container and click on it, event will occur, only one condition is required, clicked object must be with class 'cCreditTransaction'. to bind function it doesn't matter what is inside of a container, function check for required element everytime something is clicked inside of a container ;)

Sudhir Bastakoti · Accepted Answer · 2011-11-26 08:44:35Z

0

Try this:

$(eCreditT[i]).live('click', function() {
   creditTransactionSlideBackIn(eCreditT[i], 150);
});

answered Nov 26, 2011 at 8:44

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

Kayote Over a year ago

Does not work. Now Javascript console is reporting: uncaught exception: syntax error, unrecognized expression: )

Collectives™ on Stack Overflow

Jquery - binding click event to a variable

5 Answers 5

3 Comments

Comments

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related