JQuery onclick not working on text generated by a <<linkreplace>> macro (SugarCube 2.21.0 with Twine 2.2.1 )

Question

I have a simple script set up to run when text in a passage is clicked. This is working fine for the most part, except on passages where I've used the << linkreplace >> macro.

I'm thinking it has something to do with the way the << linkreplace >>  generates the text, since I tested and the JS function itself is working fine, and a console inspection shows that the <span> class is successfully being added to the text.

I'm just a bit stumped on why it won't work, any insight or help would be greatly appreciated!

Here's a simple version of the code I'm using:

I'll have a <<linkreplace "cupcake">><span class="add">slice of key lime pie</span><</linkreplace>>, please.

<style>
.red {
color: red;
}
</style>

<script>
$('.add').on( "click", function() {
    $(".add").addClass("red");
});
</script>

 

Answer 1

First.  In general, you shouldn't be using the HTML <script> or <style> tags, especially the former as it evaluates its contents in the global scope.  That said, neither are your problem here.

Your code isn't working the way you want because the elements you're attempting to target aren't on the page when you run it.  The various <<link...>> macros do not add their content to the page hidden when invoked and reveal it later when activated.  Their content is neither processed nor added to the page until they're activated.  The elements you want to affect literally do not exist until the player activates the link.

There are various ways around that: use a delegated handler (though be sure to remove it when it's no longer necessary), make the handler addition part of the macro contents, use another <<linkreplace>> to add a version of the text already bearing the class, etc.

I'm on my phone and somewhat preoccupied at the moment, so I can't really get into examples.

Comments

Thanks so much for the reply, I figured it was probably something to do with the way the link macros renders the text.

I ended up just scrapping the <<linkreplace>> macro completely and using basic html and js to achieve the same effect. A bit hacky I know but it got the job done.

I'll be sure to keep this in mind for the future though when thinking about using the link macros.