Jquery - привязка события клика к переменной

Question

All

Я действительно застрял / запутался в этой точке.

У меня есть массив с 6 элементами. Каждый элемент в массиве динамически заполняется элементами с помощью метода jquery «.html». Однако я не могу прикрепить / привязать событие к этой динамически создаваемой переменной.

Как только браузер доходит до строки проблемы (см. Область, обозначенную «ОБЛАСТЬ ПРОБЛЕМЫ»), я получаю ошибку «undefined», которая действительно сбивает с толку, поскольку весь предыдущий код той же самой переменной работает просто отлично.

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

Попробуйте это:

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

Редактировать: использовать ++i вместо i++, например:

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

retrurn ++i сначала выполняет приращение, затем возвращает i после приращения. В то время как return i++ верните i, тогда получите его.

Answer 2

Попробуйте добавить событие клика из функции addElements () и попробуйте один раз.

Answer 3

попробуйте связать родительский div и затем использовать if($e.target).is('some')){}, он будет действовать как .live, например:

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

конечно, вам понадобится в минуту больше if, чтобы проверить, нажал ли dom el ребенок .cCreditTransaction, например:

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

Answer 4

Ерунда создайте элемент, используя JavaScript, а затем используйте функцию jQuery, чтобы преобразовать его в объект jQuery. Вы можете позволить jQuery создать элемент непосредственно для вас.

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

Кроме того, поскольку eCretitT [i] уже является элементом jQuery, нет необходимости снова вызывать функцию jQuery.

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

Если вы уже пробовали методы on, bind, live и click, то, возможно, проблема в вызванной функции. Попробуйте вставить console.log() или alert() внутри функции, чтобы убедиться, что событие click действительно происходит. Если это произойдет, то функция creditTransactionSlideBackIn() является вашей проблемой.

EDIT

Проблема в том, что когда происходит событие, i больше не является исходной переменной.

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

Затем, когда вы вызываете функцию, вы можете обратиться к атрибуту данных вместо переменной i:

/* ***** 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 5

Попробуйте это:

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