Buttons with dynamic content

Question

I have buttons with labels that change depending on the topic that gets loaded. When clicked, the button loads new data to a chart. This works well on span elements but it doesn't work when I wrap the span in a button.

Example:

<button type = "button" class = "btn btn-default"><span id="cat1"></span></button>

Labels are set with :

click: function (e) {
            document.getElementById('cat1').innerHTML = 'something'
};

Data is bound on click with:

$("#cat1").click(function() {
   // do stuff
 });

something gets lost when I add the button for the span. I have tried to replace span with an anchor but it doesn't work either.

Is there a reason you need the span? Why not just move that id onto the button. — Jake Haller-Roby, Jun 03 '16 at 19:35
I agree. Putting the ID in the button seems like the best idea. Another option would be using Select and Option tags — Alexey Ayzin, Jun 03 '16 at 19:37
I tried. Nothing happens even when I put the id in the button. — Monduiz, Jun 03 '16 at 19:37
You're missing a right paren after your click function - is that the issue? — Fred Willmore, Jun 03 '16 at 19:45
Good catch but no, the code in my app doesn't have that typo. I edited the example code. — Monduiz, Jun 03 '16 at 19:46
Are you replacing the contents of the button dynamically? Then see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1 — Barmar, Jun 03 '16 at 19:54
Ok, it works. I changed the jquery version and put the id in the button. The answer was given by gravityplanx how do I give you the credit? — Monduiz, Jun 03 '16 at 19:55

score 1 · Answer 1 · answered Jun 03 '16 at 19:46

1

Did you try?

<button type="button" class="btn btn-default" id="cat1"></button>

answered Jun 03 '16 at 19:46

Wagner Danda da Silva Filho

4,958
9
39
49

score 1 · Answer 2 · edited Jun 03 '16 at 19:52

1

How you are using jQuery, you can try a more simple form.

Try it:

$('#cat1').click(function () {
    $(this).html('something');
});

Or if the set value is out of the event, you cant try it:

$('#cat1').html('something');

edited Jun 03 '16 at 19:52

David Thomas

249,100
51
377
410

answered Jun 03 '16 at 19:49

Rafael Botelho

398
5
11

Rafael, interesting syntax. I need to have the content defined in advance though not just on click so its setup a little earlier in the app. – Monduiz Jun 03 '16 at 19:57

score 0 · Answer 3 · answered Jun 03 '16 at 20:09

You can update the text in span when button is clicked using following code

$('#btnClick #cat1').text("something");

In the above I gave a id for button as btnClick.

You can achieve the functionality without using span as well. For that you need to specify button as

<button id="btnClick">Button</button>

To change text of button, the code which need to be in click event will be

$('#btnClick').text("change")

score 0 · Answer 4 · answered Jun 03 '16 at 20:09

When a span is nested inside a button, every time you click on it, the button click is fired. but the span click is not fired

based on your html, it looks like you are using bootstrap, you can do something like the following

<div class="btn btn-default">
    <span id="cat1"></span> 
</div>

I have a working example in the fiddle.

http://jsfiddle.net/pparas/dv3amy7k/1/

Buttons with dynamic content

4 Answers4