Преобразовать содержимое атрибута функционировать и выполнять

Question

Рассмотрим следующий пример:

<div id="Demo" data-after-load="alert('Woof!')">Loading...</div> 

Вы заметите, что я добавил пользовательские data- атрибут в div - что идентификатор нравится делать:

• Проверьте DIV содержит атрибут
• если он, хранить содержимое атрибута как анонимная функция будет выполнена позже
• Выполните анонимную функцию на более позднем этапе

Это то, что я до сих пор:

var runLater = function() {}; 
if ($("#Demo").attr("data-after-load")) { 
    runLater = ?????; 
} 
runLater(); 

Answer 1

if($("#Demo").data('afterLoad') !== undefined){ 
    var runLater = $("#Demo").data('afterLoad'); 
} 
eval(runLater); 

Хотя, как правило, лучший способ, чем того, чтобы использовать eval. Возможно, объясните, что вы используете для этого, и может быть лучший дизайн для вашего требования.

Answer 2

Вы можете eval() атрибут ...

var runLater = $("#Demo").attr("data-after-load"); 

if(runLater) { 
    eval(runLater); 
} 

... но если это вообще возможно, вы должны прикрепить функцию к элементу с .data(). Таким образом, вы можете избежать использования eval.

$("#Demo").data("after-load", function() { 
    alert('Woof!'); 
}); 

... 

var runLater = $("#Demo").data("after-load"); 

if(runLater) { 
    runLater(); 
} 

Demo

... и если вы обязательно должны иметь атрибут данных в HTML, следующая лучшая вещь, чтобы отнести его к функции, если список возможных функций известно.

HTML:

<div id="Demo" data-after-load="woof">Loading...</div> 

JS:

var runLater = $("#Demo").data("after-load"); 

var funcList = { 
    woof: function() { 
     alert('Woof!'); 
    }, 
    foow: function() { ... } 
}; 

if(runLater && funcList[ runLater ]) { 
    funcList[ runLater ](); 
} 

Demo