動態創建的元素和傳遞參數的事件綁定

Question

我在爲我的問題尋找解決方案時發現了類似的問題，但我不認爲它相當於我正在尋找的東西。

使用jQuery的.on（）對綁定動態創建的元素上的事件並不是一件容易的事，但我在試圖傳遞不同的參數來調用不同的函數時卡住了。在閱讀https://developer.mozilla.org/en/JavaScript/Guide/Closures後，我想出了下面的工作示例，但我想知道它是否是最好的方法或者是否有更優雅的解決方案？

http://jsfiddle.net/V25Zc/

另外，我經常閱讀使用eval（）不是最好的做法，由於脆弱性問題，但有另一種方式來構建動態函數名？

編輯：

非常感謝每個人的偉大的答案！其中一個答案被刪除了嗎？我喜歡那個，因爲這個提示將參數存儲在屬性中。再次感謝所有！

Answer 1

事件代表團的一點是，你並不需要一個事件綁定到每一個元素（或同一元素多次），只是一次普通的父母，就像這樣：

function createLinks() { 

    var $container = $("#container"), 
     links = ""; 



    for (var i=0; i < 4; i++) { 
     links += '<a class="linklink" href="#">Link_' + i + '</a>'; 
    } 

    $container.html(links).on("click", ".linklink", function(){ 
     console.log("fn action"+$(this).index()); 
    }); 
} 

createLinks(); 

爲了避免使用eval，你可以有一個函數數組，並通過指數打電話給他們：

arrayOfFunctions[ $(this).index() ](); 

http://jsfiddle.net/V25Zc/2/

Answer 2

它看起來像你最初的問題是，你想調用一個函數，它的名字將由傳入的參數決定。這些函數是否在全局範圍內？如果是的話，我只想做：

function helpCallback(index) { 
    return function() { 
     window['action' + index](); 
    } 
} 

這是，如果你想傳遞參數給actionX額外的好處，這樣做的指標合格後這些參數有以下修改

function helpCallback(index) { 
    var args = arguments; 
    return function() { 
     window['action' + index].apply(null, [].slice.call(args, 1)); 
    } 
} 

所以helpCallback(1, "foo");將返回調用action1('foo')

Answer 3

把你的函數對象的功能

var myFuncs = { 
action0:function(){ console.log("fn action0"); }, 
action1:function(){ console.log("fn action1"); }, 
action2:function(){ console.log("fn action2"); }, 
action3:function(){ console.log("fn action3"); } 
}; 

var funcNumber = "3"; 

for (var i=0; i < 4; i++) 
{ 
    links += '<a id="link_' + i + '" href="#">Link_' + i + '</a>'; 
    (function(myI) 
    { 
     $container.on("click", '"#link_' + i + '"', function() 
     { 
       myfuncs["action"+funcNumber](mI); 
     }); 
    })(i); 
} 

當然，如果他們正在對全球範圍內讓你也可以做

for (var i=0; i < 4; i++) 
{ 
    links += '<a id="link_' + i + '" href="#">Link_' + i + '</a>'; 
    (function(myI) 
    { 
     $container.on("click", '"#link_' + i + '"', function() 
     { 
       window["action"+funcNumber](mI); 
     }); 
    })(i); 
} 

Answer 4

我不會親自過問與創建ID，然後引用它們。爲什麼不在綁定到你創建的實際元素中使用閉包。

例如，你可以這樣做

function createLinks() { 

    var $container = $("#container"); 

    for (var i=0; i < 4; i++) { 
     var link = $('<a href="#link' + i + '">Link_' + i + '</a>'); 
     $container.append(link); 
     (function(){ 
      var index = i; 
      link.click(function(){ 
       alert("Do my thing " + index); 
      }); 
     })(); 
    } 

} 

createLinks(); 

Answer 5

如果每個動作功能實際上已經是一個不同的功能（而不是一個功能，基於傳遞給它的索引行爲不同），那麼我d通過在鏈接上放置一個屬性並通過點擊來獲取它，這樣做可以這樣做：http://jsfiddle.net/jfriend00/gFmvG/。

function action0(){ console.log("fn action0"); } 
function action1(){ console.log("fn action1"); } 
function action2(){ console.log("fn action2"); } 
function action3(){ console.log("fn action3"); } 

var actions = [action0, action1, action2, action3]; 

function createLinks() { 

    var $container = $("#container"), 
     links = ""; 

    for (var i=0; i < 4; i++) { 
     links += '<a id="link_' + i + '" href="#" data-num="' + i + '">Link_' + i + '</a>'; 
     $container.on("click", '"#link_' + i + '"', function() { 
      actions[$(this).data("num")](); 
     }); 
    } 

    $container.html(links); 
} 

createLinks(); 

如果你不必須有單獨的函數對每一個動作，我不喜歡這樣，你可以在這裏看到：http://jsfiddle.net/jfriend00/Z8Rq6/。

function doAction(index) { 
    console.log("fn action" + index); 
} 

function createLinks() { 

    var $container = $("#container"), 
     links = ""; 

    for (var i=0; i < 4; i++) { 
     links += '<a id="link_' + i + '" href="#" data-num="' + i + '">Link_' + i + '</a>'; 
     $container.on("click", '"#link_' + i + '"', function() { 
      doAction($(this).data("num")); 
     }); 
    } 

    $container.html(links); 
} 

createLinks(); 

這也可以與執行關閉其鎖定在指數值完成，但我發現語法稍差可讀（它需要太多的腦循環讀取代碼，並知道它在做什麼），所以我更喜歡這種方式的屬性。