How to pass parameters into onclick function parameters into dynamically created buttons?

Question

My javascript reads text from a file and creates button dynamically base on the button creation below. The problem I am facing is it is not able to call the function on click. I've tried removing the parameters to call it and it works however I can't seem to get it to work with passing of parameters. Can someone help me with it?

JS:

function toggleVisibility(type){
    alert(type);
}

Button creation:

var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of '+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';

if you want to use onclick attributes, the functions they call must exist on the global scope. — Kevin B
– Kevin B, Commented Apr 4, 2013 at 21:32

Ian · Accepted Answer · 2013-04-04 21:50:49Z

You shouldn't use inline handlers, first of all, and it's easier to create it with jQuery anyways:

var that = this;
var button = $("<button>");
button.addClass("btn btn-block btn-inverse active");
button.attr({
    type: "button",
    "data-toggle": "button tooltip",
    title: "Click this to enable/disable viewing of " + that
});
button.text(word);
button.on("click", function () {
    toggleVisibility(that);
});

(yes, I know you could chain all of the method calls, I just wanted to do it this way)

When you're ready to put this button somewhere, just use $container.append(button);.

Everything depends on what this is or what you want/expect it to be. If you need the parameter passed to toggleVisibility to be the specific button that was just clicked (I'm guessing to toggle its visibility), just pass this (ignore the that). As for setting the title attribute, I'm not sure what you want :)

If you have an HTML structure like:

<div id="container">
    <!-- Buttons go somewhere in here -->
</div>

And you're appending the buttons to that container (or somewhere in that container), it would be more efficient to bind a single click handler to the container with event delegation:

$("#container").on("click", ".special-btn-identifier", function () {
    toggleVisibility(this);
});

Of course, you'd need to add a "special-btn-identifier" class to the buttons, so that this event handler will work (and remove the individual click handlers for each button, as this will cover them). This single event handler only needs to run once, preferably as soon as the #container is ready...like in $(document).ready(function () {});.

Thanks for the insight and help! I'm picking up jQuery and uses it to create this set of buttons. Just did not know I can do this!

Nelson Benítez León · Accepted Answer · 2013-04-04 21:32:42Z

0

Replace your following line:

.. onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';

for this one:

.. onclick="toggleVisibility(this)">'+word+'</button>';

as you dont need to escape the this keyword, nor including a different this from the context where you were creating the button text.

answered Apr 4, 2013 at 21:32

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

1 Comment

Ian Over a year ago

I think they're trying to pass a reference to this from where they're creating the button, not the reference to the button. Not sure though, the OP is a little confusing

Schleis · Accepted Answer · 2013-04-04 21:33:00Z

0

Register the onClick event on the document instead of in the html when you create the button.

$(document).on('click', 'button.btn-inverse', function() { toggleVisibility(this); return false;});

answered Apr 4, 2013 at 21:33

Schleis

44.1k8 gold badges73 silver badges90 bronze badges

Comments

moonwave99 · Accepted Answer · 2013-04-04 21:37:59Z

Don't create inline HTML strings, don't use intrusive Javascript.

Though I don't even advise you to create them with vanilla jQuery, you may try with:

var $button = $('<button></button>', {
  'text'        : word
  'type'        : 'button',
  'class'       : 'btn btn-block btn-inverse active',
  'data-toggle' : 'button tooltip',
  ...
  // any other attributes
});

// append the $button anywere

$( someContainer ).append($button);

$( someContainer ).on('click', '.btn', function(event){

  // you can refer to the button with $(this) here

});

Collectives™ on Stack Overflow

How to pass parameters into onclick function parameters into dynamically created buttons?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Related