Creating buttons dynamically using jQuery

Question

I am creating buttons dynamically using jQuery:

function createRefreshButton() {
  var $btn = $('<button/>', {
    text: 'Refresh Data',
    id: 'btn_refresh'
  });

  $($btn).on('click', function () {
    ClickRefresh()
  });

  return $btn;
}

I was wondering if it is possible to change this code to something like this:

function createRefreshButton() {
  var $btn = $('<button/>', {
    text: 'Refresh Data',
    id: 'btn_refresh',
    onclick: 'ClickRefresh()'
  });
  return $btn;
}

However nothing happens when I click the button with that syntax. Is that due to errors in my suggested code or is it simply impossible? Thank you in advance.

Rory McCrossan · Accepted Answer · 2016-01-05 14:18:18Z

4

You can set the click property of the object, not onclick, and provide it the reference to the ClickRefresh function. Try this:

function createRefreshButton() {
    return $('<button/>', {
        text: 'Refresh Data',
        id: 'btn_refresh',
        click: ClickRefresh
    });
}

Working example

answered Jan 5, 2016 at 14:18

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

Mr. Blonde Over a year ago

I think my problem was that I always tried to add the method name within quotes. This works nicely and is the syntax I was looking for. Thanks!

Rory McCrossan Over a year ago

No problem, glad to help.

l2aelba · Accepted Answer · 2016-01-05 14:30:23Z

2

Normally I do like this :

function createRefreshButton() {
  // Create button
  var $button = $('<button class="btn_refresh">Refresh Data</button>');

  // Append it
  $('body').append($button);

  // Event for this button 
  $button.on('click',function(){
    alert('Refresh');
  });
}

createRefreshButton();
createRefreshButton();

Do not use id if not just only one

PS : If you have same function for those buttons so :

$(document).on('click','.btn_refresh',function(){
   alert('Refresh');
});

.. outside createRefreshButton()

Demo : https://jsfiddle.net/l2aelba/xqj9ycLk/1/

edited Jan 5, 2016 at 14:30

answered Jan 5, 2016 at 14:20

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

1 Comment

Mr. Blonde Over a year ago

Thanks for suggestion. I had it working, but I was looking to simplify the syntax a bit, like Rory showed in his answer. The snippit I added was for a refresh button. I have only one of those in my code, so no problems with id.

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-05 14:14:03Z

0

It is possible, but you need to change it to the way, jQuery likes:

function createRefreshButton() {
    var $btn = $('<button/>', {
        type: 'button',
        text: 'Refresh Data',
        id: 'btn_refresh'
    }).click(ClickRefresh);
    return $btn;
}

And you should insert the returned value by using either .append() or similar. And it works perfectly fine here:

$(function () {
  function ClickRefresh() {
    console.log("Clicked Refresh");
    $("body").append("<br>Clicked Refresh");
  }
  function createRefreshButton() {
    var $btn = $('<button />', {
      type: 'button',
      text: 'Refresh Data',
      id: 'btn_refresh'
    }).click(ClickRefresh);
    return $btn;
  }
  $("body").append(createRefreshButton());
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

answered Jan 5, 2016 at 14:14

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

3 Comments

Mr. Blonde Over a year ago

Thanks for suggestion. I was looking to simplify the syntax a bit, like Rory showed in his answer with the click method call inside the var declaration.

Praveen Kumar Purushothaman Over a year ago

@Mr.Blonde There's no difference, that's the same thing even I showed, but I answered before Rory. :) You can be fair and accept whichever is right. :)

Mr. Blonde Over a year ago

My first syntax snippit is working fine, so my question was if it was possible to have a syntax with the method call inside the var declaration.

iCollect.it Ltd · Accepted Answer · 2016-01-05 14:24:40Z

0

Just use a delegated event handler attached to a non-changing ancestor. This will work on dynamically added content as the selector is run at event time (not event-registration time)

    $(document).on('click', 'button', ClickRefresh);

The add button becomes just this:

function createRefreshButton()
{
    var $btn = $('<button/>', {
        text: 'Refresh Data',
        id: 'btn_refresh'
    });
    return $btn;
}

Note: ID's need to be unique on a page, so if you want to support multiples, you should distinguish these buttons from any other buttons on the page e.g. using a class:

$(document).on('click', '.mybutton', ClickRefresh);

function createRefreshButton()
{
    var $btn = $('<button/>', {
        'class': 'mybutton',
        text: 'Refresh Data',
    });
    return $btn;
}

JSFiddle: https://jsfiddle.net/ubmo441a/

edited Jan 5, 2016 at 14:24

answered Jan 5, 2016 at 14:18

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

2 Comments

Mr. Blonde Over a year ago

Thanks for suggestion. I had it working, but I was looking to simplify the syntax a bit, like Rory showed in his answer.

iCollect.it Ltd Over a year ago

@Mr.Blonde: Using inline click handlers defeats some of the event features of jQuery and should be avoided. When using jQuery always use jQuery handlers, but it's your funeral :)

Collectives™ on Stack Overflow

Creating buttons dynamically using jQuery

4 Answers 4

2 Comments

1 Comment

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related