Pass javascript function as data-* attribute and execute

前端 未结 4 789
甜味超标
甜味超标 2021-02-11 18:21

We know such syntaxes as below, when defining a value for onClick attribute:

相关标签:
4条回答
  • 2021-02-11 18:38

    If you really wanted to pass functions (with or without parameters) from one thing to another without binding them as events you could do it this way (I started from @Taplar's answer)

    <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>
    

    Then you could access them in your other component as:

    <script>
      $('.marker').each(function(){
        var  thisFunction = $(this).get(0).customCallback;
        //do something useful with thisFunction
      });
    </script>
    
    0 讨论(0)
  • 2021-02-11 18:39

    I think a better idea would be to dynamically bind the events and trigger them. If you wanted them to only be known by other code, you could use custom events.

    <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>
    

    Then your other components could invoke them with $(selector).trigger('customCallback');

    0 讨论(0)
  • 2021-02-11 18:49

    Simply with :

     $("body").on("click","button.marker", function(e) {
         eval($(this).data("callback"));
     })
    
    0 讨论(0)
  • 2021-02-11 18:59

    One way is to use 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

    Note: Make sure it is safe in your environment, ie there is no possibility of script injection because of bad input from users

    • Why is using the JavaScript eval function a bad idea?
    • When is JavaScript's eval() not evil?
    • eval() isn’t evil, just misunderstood
    • Eval is Evil, Part One
    0 讨论(0)
提交回复
热议问题