0
212
VistasHow can I change the text inside my dynamically created button's <span> 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
1 Respuestas
Responde la pregunta0
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');