jquery, attaching click event to a function and combining with a string of javascript calls?

Question

I'm trying to attach a click event to a button that runs calls from both a parameter and from itself.

What I want is a 1st alert to always show, then execute the 2nd alert that is stored in myparam.onclick as a string.

Non-working attempt:

var myparam = { onclick: 'alert("second");' };
$('#my_button_id').on('click', function(){ alert('first'); myparam.onclick });

I know that if I change myparam to a legitimate function, such as:

var myparam = {onclick: function(){alert('second');} }

I can call that just fine by

$('#my_button_id').on('click', myparam.onclick);

but I still don't know how to concatenate two together. I don't want to call the first alert every time in the myparam func call.

Any help is appreciated.

What is use case that you want this stored as strings? Would have to use `eval()` on that string but that doesn't come without big security concerns. An alternative is to store named functions as strings and params as other property and then call named function from those like ... `myFunctions[myparam.onclick](myparam.clickParams)` — charlietfl, Jan 24 '18 at 19:49
Usage scenario is a json array of buttons, each having their own javascript calls, but which, for each button, I also want to run a common javascript call without all the duplication of putting that call into the array. I guess an alternative would be to use a second separate jquery click handler for the additional functions. I would prefer being able to parse the strings so I can also avoid having to build the entire function(){} call around the javascript. — R. StackUser, Jan 24 '18 at 19:52
Can do a lot using `data-` attributes also. Look at how whole bootstrap library works for example — charlietfl, Jan 24 '18 at 19:54

score 2 · Accepted Answer · answered Jan 24 '18 at 20:15

You can use the eval function to execute javascript code as String.

var myparam = {
  onclick: 'alert("second");'
};
$('#my_button_id').on('click', function() {
  alert('first');
  eval(myparam.onclick);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="my_button_id">Click</button>

Joel Garcia Nuño · Answer 2 · 2018-01-24T20:05:28.170

You should see that mate: https://stackoverflow.com/a/12651991/6158032

My little help is..

//Clousure 
(function($) {
    //Document.ready
    $(function(){
    //I think you want this ?
    let myparam = { onclick: function() { alert("second"); } };
    $('#my_button_id').on('click', function(){ alert('first'); myparam.onclick() }); 
    //Another way.
    function doAlert (messages) {
        alert(messages);
    }
    //Params Object
    let my_params = {
        onclick_first : function () { return doAlert('first') },
      onclick_second : function () { return doAlert('second') }
    }
    //Event Click
    $('#my_button_id').on('click',function(){
        //First Alert
        my_params.onclick_first();
      //Second Alert
      my_params.onclick_second();
    });
  });
})(jQuery);

JSFIDDLE DEMO

But those functions can't be stringified to json – charlietfl Jan 24 '18 at 19:56 — charlietfl, Jan 24 '18 at 19:56
That was not in the question, i gonna see – Joel Garcia Nuño Jan 24 '18 at 19:58 — Joel Garcia Nuño, Jan 24 '18 at 19:58

score 0 · Answer 3 · answered Jan 24 '18 at 20:03

0

It was close:

var myparam = {onclick: function(){alert('second');} };
$('#my_button_id').on('click', function(){ alert('first'); myparam.onclick() });

You missed a parenthesis at the end f the function call: myparam.onclick()

answered Jan 24 '18 at 20:03

Jani-B.

19
1

1

@JaniB you were asking how to execute the 2nd alert that is stored in `myparam.onclick` as a string. This answer is not what you were asking for. – Ele Jan 24 '18 at 20:14

score 0 · Answer 4 · answered Jan 24 '18 at 20:14

If you really needed a string you can create a function and supply the body as a string then call it:

var myparam = { onclick: 'alert("second");' };
$('#my_button_id').on('click', function(){
    alert('first');
    var fun = Function(myparam.onclick);
    fun();
});

jquery, attaching click event to a function and combining with a string of javascript calls?

4 Answers4