Add macro call, or at least a working link through javascript (Sugarcube 2.21.0)

Question

I'm trying to work with sugarcube and I've been pretty stuck on a few different levels.  One in particular is regarding adding a macro call to a passage dynamically through javascript.  I could list a few reasons you might want to do this if necessary, but here's what I've got so far.

The passage looks like this (I manually added the code that I'm trying to dynamically add through JS):

---Start of passage---
<<link "Wait" `State.passage`>><<run passTime(4)>><</link>>
---End of passage---

The javascript looks like this:

window.passTime = function(amount)
{
    alert("Passing time: " + amount);
}

$(document).on(":passagestart", function (ev)
{
    $(ev.content).append("<<link \"Wait\" `State.passage`>><<run passTime(4)>><</link>>");
});

$(document).on(":passagedisplay", function (ev)
{
    $("#passages").append("<<link \"Wait\" `State.passage`>><<run passTime(4)>><</link>>");
});

At this point I'd be happy with manually adding an html <a> tag, but I tried copying the tag created from the macro call above and it did not react to mouse clicks.

Any thoughts on how something like this could be achieved would be very appreciated.  Thank you

Answer 1

I believe what you want is this:

$(document).on(':passagerender', function (ev) {
	$(ev.content).wiki('<<link "Wait" `State.passage`>><<run passTime(4)>><</link>>');
});

See the :passagerender event for details.

Comments

Ahh, I see.  jquery.wiki parses the sugarcube syntax and returns the final html syntax.  Very useful to know.

Thank you very much for your help with this!