How can I change the text inside my dynamically created button’s with jQuery?

I have reviewed How can I change the text inside my <span> with jQuery? to get where I am. However, that does not cover dynamically created buttons.

I am creating buttons dynamically which contain a label.

$("<button type='button' id='" + this.patExeId 
                + "' name='exerciseMachine' class='btn exeBtn btn-large col-lg-2 col-md-2 col-sm-2 col-3 m-1 p-3' "
                + "value='" + this.exeName + "'>" + this.exeName + " <span class='label label-light label-as-badge'>0</span></button>").appendTo($("#allExercises"));

The three “this.patExeId” values are

• OA==
• Mg==
• Mw==

I want to update the label as exercise sets are completed. I am using this test code that is triggered when the button is clicked:

$('#'+$(this).attr('id')+ ' span').html('3');

This is triggering an error shown in the console log:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #OA== span

Answer

Since in your case you are crafting a selector like #id span but the element you are using to grab the id is this so you can just make it simpler and directly select an element inside that one using find()

 $(this).find('span').html('3');

But to better address your first concern, you were using a selector with an id containing special characters. The = has a special meaning in css so it requires to be escaped if you need it to include it literally. To make a very simple example showing that, if you had an element with id #0== you should use the following selector:

$('#O\=\=')

And this would be an alternate solution to your problem just for the sake of showing my point:

$('#' + $(this).attr('id').replace(/=/g, '\=') + ' span').html('3');