HTML string with client-side server actions

Question

I am trying to output a string that contains HTML, and some try to call a client-side server action. However, when inspecting the output code, the onclicks are not triggered.

Here is what I have so far:

Lightning component:

<aura:attribute name="article" type="API.Article" />
<ui:scrollerWrapper class="scrollerSize">
    <div class="slds-text-heading_medium article-title">{!v.article.title}</div>
    <div class="article-text">
        <aura:unescapedHtml value="{!v.article.content}"/>
    </div>
</ui:scrollerWrapper>

Output HTML copied from Chrome (I assume the onclick should have been processed)

<ul>
    <li>
        <span onclick="{! c.getArticle }">
            <a data-articleid="account-go-live" href="javascript:void(0);">
                Test internal link
            </a>
        </span>
    </li>
</ul>

Component controller

getArticle : function(component, event, helper) {
        console.log('hit');
        var searchText = component.get("v.searchText");
        var category = component.get("v.searchCategory");
        var currentArticle = component.get("v.article.id");
        var previousArticles = component.get("v.previousArticles");
        if(previousArticles == null)
            previousArticles = [];
        previousArticles.push(currentArticle);

        var action = component.getEvent("SearchToArticle");
        action.setParams({"articleId" : event.currentTarget.children[0].dataset.articleid, "searchText" : searchText, "searchCategory" : category, "previousArticles" : previousArticles});
        action.fire();
    }

Any idea how can I make the onclick="{! c.getArticle }" actually trigger an action?

Answer 1

Ok, the answer to your question: Salesforce doesn't translate the code which you put inside of dynamic params to aura:unescapedHtml tag.

Compare: if you put your code inline

<ui:scrollerWrapper class="scrollerSize">
    <ul><li> <span onclick="{! c.getArticle }"> <a data-articleid="account-go-live" href="javascript:void(0);"> 
        Test internal link </a>  </span> </li> </ul>
</ui:scrollerWrapper>

then Salesforce would translate it and add click listener

If you put it as value of param to aura:unescapedHtml tag, it is no longer part of Lightning component markup, thus it is not processed by Salesforce: