javascript / jQuery przypisywanie wywoływanej funkcji pod onClick z tabeli

Question

Witam, mam tabelę w której chcę przechowywać informację o przyciskach do utworzenia. 

var defaultOption = [
	{
		title: 'Sortuj parametry',
		onClick: 'setTheOrder'
	}
];

Oraz funkcję która generuje te przyciski

$.each(defaultOption, function(idx, data){
	var elem = document.createElement('a');
	elem.setAttribute('class', 'defaultOption');
	if (data.title) elem.innerHTML = data.title;
 $('#edit_product_card').append(elem);
});

Zabawa zaczyna się tutaj

if (data.onClick) elem.onclick = function() { setTheOrder(); }

Niestety nie bardzo wiem jak uzyskać efekt aby zamiast setTheOrder(); pobierało informację o nazwie funkcji z data.onClick.

Próbowałem czegoś w tym stylu jednak to też nie działa

elem.addEventListener("click", data.onClick, false);

Nie bardzo też wiem w jaki sposób "nazwać" to aby oddać o co mi chodzi więc może pokaże na przykładzie PHP

$this->model->{$_GET['funkcja']}($_GET['params']);

 

Comments

Niestety nie bardzo wiem jak uzyskać efekt aby zamiast setTheOrder(); pobierało informację o nazwie funkcji z data.onClick.

Co masz na myśli? Chcesz przypisać zawartość data.onClick do elem.onclick - czyli w data.onClick znajduje się funkcja (jej referencja albo sam kod do wywołania)?

---

W data.onClick chciałem przechować nazwę funkcji jaka znajduje się w innym pliku JS.

Docelowo chcę uzyskać efekt że w tabeli przechowuje informację o nazwie przycisku oraz to jaką funkcję ma mieć do siebie przypisaną (nazwę funkcji)

---

Odniesienie się do funkcji poprzez jej nazwę (zamiast referencji) zadziała, gdy przechowujesz ją jako metodę obiektu, albo ta funkcja jest globalna i przypisana do obiektu window. Wtedy możesz użyć bracket notation, żeby dostać się do funkcji dynamicznie poprzez obiekt, w którym ona się znajduje.

Na przykład:

window.explicitGlobalFunction = () => {};
var implicitGlobalFunction = () => {}; // dostępna również pod `window`

//// wywołania funkcji globalnych
window.explicitGlobalFunction(); 
window.implicitGlobalFunction();

// to samo, ale dynamicznie (za pomocą zmiennych)
const dynamicExplicitGlobalFunctionName = 'explicitGlobalFunction';
const dynamicImplicitGlobalFunctionName = 'implicitGlobalFunction';
window[dynamicExplicitGlobalFunctionName]();
window[dynamicImplicitGlobalFunctionName]();

//// wywołania metody
const dynamicMethodName = 'someMethod';
const obj = {
  someMethod() {}
};
obj.someMethod();
obj[dynamicMethodName](); // to samo, ale z użyciem nazwy ze zmiennej

 

---

Faktycznie dzięki za rozwiązanie

const functionName = data.onClick;
elem.onclick = function() { window[functionName](); }; 

A ja głupi szukałem po google pod frazami "convert string to function name"

---

BTW, powinno zadziałać bez dodatkowych zmiennych

elem.addEventListener('click', window[data.onClick]);
elem.onclick = window[data.onClick];
elem.setAttribute('onclick', data.onClick +'()');