1

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

enter image description here

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
Glyn
  • 1,933
  • 5
  • 37
  • 60
  • https://stackoverflow.com/questions/40096448/how-to-select-ids-which-contain-special-characters You have special characters on that id and they made it an invalid selector. Change those == or follow the link I suggested – Diego D Apr 24 '22 at 00:04

1 Answers1

1

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');
Diego D
  • 6,156
  • 2
  • 17
  • 30
  • I added Sets completed so I adjusted your very complete answer to $(this).find('span:first').html('3'); – Glyn Apr 24 '22 at 00:42