CODEWITHSUNDEEP
javascriptjquerybind
Kayote
Kayote

Reputation: 15627

Jquery - binding click event to a variable

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++;
}

Upvotes: 3

Views: 3804

Answers (5)

Mahmoud Gamal
Mahmoud Gamal

Reputation: 79929

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.

Upvotes: 2

vonsko
vonsko

Reputation: 395

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')){}

Upvotes: 1

Kiran
Kiran

Reputation: 20313

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

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12294

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++;
}

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Try this:

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

Upvotes: 0

Related Questions