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
– charlietfl, Commented Jan 24, 2018 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
– R. StackUser, Commented Jan 24, 2018 at 19:52
Can do a lot using data- attributes also. Look at how whole bootstrap library works for example — charlietfl
– charlietfl, Commented Jan 24, 2018 at 19:54

Ele · Accepted Answer · 2018-01-24 20:15:13Z

2

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>

answered Jan 24, 2018 at 20:15

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jani-B. · Accepted Answer · 2018-01-24 20:03:27Z

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, 2018 at 20:03

Jani-B.

191 bronze badge

1 Comment

Ele Over a year ago

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

Joel Garcia Nuño · Accepted Answer · 2018-01-24 20:05:28Z

0

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

edited Jan 24, 2018 at 20:05

answered Jan 24, 2018 at 19:55

Joel Garcia Nuño

1,04111 silver badges20 bronze badges

2 Comments

charlietfl Over a year ago

But those functions can't be stringified to json

Joel Garcia Nuño Over a year ago

That was not in the question, i gonna see

DJDaveMark · Accepted Answer · 2018-01-24 20:14:07Z

0

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();
});

answered Jan 24, 2018 at 20:14

DJDaveMark

2,87526 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related