que - Pasa la función javascript como atributo de datos*y ejecuta
title css (5)
Conocemos las sintaxis que se describen a continuación, al definir un value para el atributo onClick :
<button type="submit" onclick="alert(''hi'');"></button>
<button type="submit" onclick="doWork"></button> <!-- This one doesn''t work -->
<button type="submit" onclick="doWork()"></button>
<button type="submit" onclick="doWork(''Mike'', 2)"></button>
Lo que me interesa es definir un data-attribute personalizado y ejecutar el valor de la siguiente manera:
<button type="submit" data-callback="alert(''hi'');" class="marker"></button>
<button type="submit" data-callback="doWork" class="marker"></button>
<button type="submit" data-callback="doWork()" class="marker"></button>
<button type="submit" data-callback="doWork(''Mike'', 2)" class="marker"></button>
<script type="text/javascript">
jQuery("body").on("click","button.marker", function(e) {
var callback = jQuery(e.currentTarget).data("callback");
// Now I need to execute the callback no matter of the format
// 1. Execute as function''s body
// 2. Or by function ''name''
// 3. Or by function ''name'' with 0 parameters
// 4. Or by function ''name'' with n parameters
})
function doWork(name, nr){
var personName = name || "Unnamed";
var personNr = nr || 0;
alert("Name is: " + personName + " Nr: " + personNr);
}
</script>
He pegado la muestra a jsBin
¿Cómo lograr el mismo comportamiento utilizando atributos de datos personalizados?
Creo que una mejor idea sería vincular dinámicamente los eventos y desencadenarlos. Si quisiera que solo fueran conocidos por otro código, podría usar eventos personalizados.
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $(''.marker'');
$markers.filter(''.marker1'').bind(''customCallback'', function(){ alert("hi"); });
$markers.filter(''.marker2'').bind(''customCallback'', function(){ doWork(); });
</script>
Luego, sus otros componentes podrían invocarlos con $ (selector) .trigger (''customCallback'');
Si realmente quisieras pasar funciones (con o sin parámetros) de una cosa a otra sin vincularlas como eventos, podrías hacerlo de esta manera (comencé desde la respuesta de @ Taplar)
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $(''.marker'');
$markers.filter(''.marker1'').get(0).customCallback = doWork;
$markers.filter(''.marker2'').get(0).customCallback = function(){
doWork(arg0,arg1);
};
</script>
Luego puedes acceder a ellos en tu otro componente como:
<script>
$(''.marker'').each(function(){
var thisFunction = $(this).get(0).customCallback;
//do something useful with thisFunction
});
</script>
Simplemente con:
$("body").on("click","button.marker", function(e) {
eval($(this).data("callback"));
})
Simplemente puede enlazar una función como un atributo de datos
const ele = $(''button'');
ele.data(''onClick'', evt => {
alert(''bye'');
})
ele.click(evt => {
const ele = $(evt.target);
ele.data(''onClick'')(evt);
})
Una forma es usar eval()
jQuery(".container").on("click", "button.marker", function (e) {
var callback = jQuery(e.currentTarget).data("callback");
var x = eval(callback)
if (typeof x == ''function'') {
x()
}
});
Demo: Fiddle
Nota: asegúrese de que sea seguro en su entorno, es decir, no hay posibilidad de inyección de guiones debido a la mala entrada de los usuarios