Question

所有

此时我真的感到困惑/困惑。

我有一个包含6个项目的数组。数组中的每个项都使用jquery'.html'方法动态填充元素。但是，我似乎无法将事件附加/绑定到此动态创建的变量。

一旦浏览器到达问题行（请参阅标记为“问题区域”的区域），我就会收到“未定义”错误，这实际上令人困惑，因为同一个变量上的所有先前代码都可以正常工作。

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

废话使用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()就是你的问题。

修改

问题是当事件发生时，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 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

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

Answer 5

试试这个：

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

Jquery - 将click事件绑定到变量

5 个答案: