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

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

• javascript
• jquery

• if you want to use onclick attributes, the functions they call must exist on the global scope. – Kevin B Commented Apr 4, 2013 at 21:32
• What exactly is this when creating the button? – Ian Commented Apr 4, 2013 at 21:34

4 Answers 4

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

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.

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

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

});