Jquery - 將click事件綁定到變量

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然后icrement它。

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

然后，當您調用該函數時，您可以引用data屬性而不是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);
});