jquery - 綁定點擊事件到一個變量

Question

全部，

我真的堅持/困惑在這一點上。

我有一個數組，其中有6個項目。數組中的每個項目都使用jquery'.html'方法動態填充元素。但是，我似乎無法將一個事件附加/綁定到這個動態創建的變量。

只要瀏覽器進入問題行（請參閱標記爲「PROBLEM AREA」的區域），就會得到一個'未定義'的錯誤，這真是令人困惑，因爲同一個變量上的所有代碼都可以正常工作。

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

嘗試添加點擊事件out addElements（）函數並嘗試一次。

Answer 2

試試這個：

$(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 3

嘗試這種情況：

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

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()以確保點擊事件實際發生。如果發生，那麼功能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 5

嘗試綁定父格，然後用if($e.target).is('some')){}，它將作爲。生活，是這樣的：

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

當然，你需要在一分鐘內的

檢查，如果點擊的DOM EL是.cCreditTransaction孩子，像這樣大if：

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