Обратный вызов Javascript по имени функции в атрибуте данных

Question

Я пытаюсь предоставить функцию обратного вызова для вызова ajax, где имя функции сохраняется в атрибуте «data-apply» формы.

jQuery(function($) { 
    $('form[data-async]').on('submit', function(event) { 
     var $form = $(this); 
     var $target = $($form.attr('data-target')); 
     var apply = $form.attr('data-apply'); 
     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 

      success: function(data, status) { 
       var callBackFunc = new Function(apply); 
       callBackFunc.call(); 
      } 
     }); 

     event.preventDefault(); 
    }); 
}); 

function addBubble(){ 
    alert('a'); 
} 

Форма:

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble();" action="/some/action/performed" method="POST"> 

Я хочу, чтобы избежать использования eval() в этом случае, поскольку eval() может вызвать проблемы с безопасностью и производительностью. Не уверен, что Function() - более безопасный метод, или есть совершенно другой способ справиться с этим.

Итак, есть ли способ передать функцию обратного вызова, чтобы справляться с ситуациями разности?

Исходный код был заимствован из: https://gist.github.com/havvg/3226804

Answer 1

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

window["functionName"].call(); 

Удалить скобки из addBubble

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble" action="/some/action/performed" method="POST"> 

Javascript

jQuery(function($) { 
    $('form[data-async]').on('submit', function(event) { 
     var $form = $(this); 
     var $target = $($form.attr('data-target')); 
     var apply = $form.attr('data-apply'); 
     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 

      success: function(data, status) { 
       if(typeof window[apply] == "function") 
        window[apply].call(); //window[apply](); or window[apply].apply(); will work too 
      } 
     }); 

     event.preventDefault(); 
    }); 
}); 

function addBubble(){ 
    alert('a'); 
} 

Answer 2

Если функция определена глобально (т.е. на window объекта) можно использовать window[$form.attr('data-apply')]() вызвать функцию обратного вызова. Обратите внимание, что вам нужно будет удалить () в data-apply