Jquery - 将click事件绑定到变量

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

尝试从addElements（）函数中添加click事件并尝试一次。

Answer 5

Try this:

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