Jquery - 将点击事件绑定到变量

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

- Kayote

---

我在想，这可能与js文件在HTML文档中加载的位置有关吗？我将js文件放置在HTML的body标签底部。 - Kayote

第二个理论是，当它到达将事件“绑定”到变量时，浏览器可能已经读取并实现了“return i ++”，这意味着此时，“eCreditT [i]”对于“i”的值与以前不同？ - Kayote

它起作用了！但我真的不知道为什么它起作用了。当我注释掉'return i++'并运行代码时，它起作用了。现在我的问题是如何在函数末尾实现'return i++'？ - Kayote

尝试将点击事件添加到addElements()函数之外，然后再试一次。 - Kiran

@Kiran，谢谢你，这确实起作用了。我之前也试过这个方法，但可能当时做错了什么，现在显然它是有效的。万分感谢。 - Kayote

@Kiran，请单独发布答案，这样我就可以选择它作为最佳答案了。 - Kayote

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 的值，然后再将其增量。

- Mahmoud Gamal

---

已经尝试过了，不起作用。据说 eCreditT[i] 没有定义。 - Kayote

谢谢，问题似乎已经解决了，但是出现了新的问题。请查看原始帖子中的最后一条评论。 - Kayote

哇，谢谢！我不知道++i和i++之间的区别。我进行了搜索，显然++i返回更新后的i，而i++则不会。但是在JavaScript中似乎不是这种情况，因为我的函数正常工作...？ - Kayote

Answer 2

尝试将点击事件添加到addElements()函数之外，然后再试一次。

- Kiran

Answer 3

使用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()以确保单击事件实际发生。如果发生了，则函数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++;
}

- Jose Faeti

---

哇塞，感谢您的顶尖建议。已经实施了。关于实际问题，我已经解决了...部分地。似乎是"return i++"有问题。请查看我在原始帖子中的最后一条评论。 - Kayote

编辑了一个建议的解决方案，以便在正确的时刻存储和检索正确的ID值。 - Jose Faeti

谢谢@Jose Faeti。我正在研究jQuery的数据方法。 - Kayote

Answer 4

尝试绑定父级div，然后使用if($e.target).is('some')){}，它将像.live一样起作用，代码如下：

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

当然，在一分钟内，您需要一个较大的 if 来检查点击的 DOM 元素是否是 .cCreditTransaction 的子元素，像这样：

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

- vonsko

---

我有点困惑，你能否详细解释一下为什么/如何绑定父级div会有帮助。同时我会继续阅读关于'.live'和'.is'的资料 :) - Kayote

你应该将这些代码行放在addElements函数之外，原因是：当你向容器添加元素并单击它时，事件会发生，只需要一个条件，被单击的对象必须带有类“cCreditTransaction”。为了绑定函数，容器内部的内容并不重要，函数会在每次容器内部有任何东西被单击时检查所需的元素。;) - vonsko

Answer 5

尝试这个：

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

- Sudhir Bastakoti

---

不起作用。现在Javascript控制台报告： 未捕获的异常：语法错误，无法识别表达式:) - Kayote