I have a function that runs after my scripts finish loading that will perform several callouts and makes logic decisions to create a html string representing DOM elements (Essentially building a dynamic table layout).

In my doneRendering function, I bind certain elements using onclick as well as call jQueryDatatables on several of the elements(by class).

Prior to enabling LockerService this worked perfectly. After LockerService, in afterRender, doneRender and reRender, I am unable to select "see" these elements using jQuery.




<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ExampleController">
<ltng:require styles="{!join(',',$Resource.fixedHeaderOverride,$Resource.font_awesome,$Resource.jqueryDatatables+'/jquery.dataTables-1.10.13.min.css',$Resource.jqueryDatatables+'/fixedHeader.dataTables-3.1.2.min.css')}" scripts="{!join(',',$Resource.momentJS,$Resource.jQuery,$Resource.jquerySticky,$Resource.jQueryDatatables+'/jquery.dataTables-1.10.13.min.js',$Resource.jQueryDatatables+'/dataTables.fixedHeader-3.1.2.min.js')}" afterScriptsLoaded="{!c.doInit}"/>
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="unescapedBody" type="String"/>
<article class="slds-card">
    <div class="slds-card__body">
        <div aura:id="ExampleAuraId">
            <aura:unescapedHtml value="{!v.unescapedBody}"/>
    <div class="slds-card__footer"></div>


doInit: function(cmp,evt,helper) {
    cmp.set("v.unescapedBody","<table class='slds-table'><tr><td><button class='exampleButton'>My Button</button></td></tr></table>");
//Bind section headers when clicked
doneRendering: function(cmp, evt, helper){

        console.log(jQuery('.slds-table')) //Returns no results



  • could you share some of your code? error messages? thanks! – glls Apr 13 '17 at 13:00
  • I've included sample code above which is similar to what I am trying to do. I've moved the code block from doneRendering to afterRender and reRender with the same results. the console.log returns no results and therefore the dataTable does not get created and the button does not get bound. – Ryan G. Apr 13 '17 at 14:14

The table elements are not accessible because the DOM is rendered by <aura:unescapedHtml>, which is from a different namespace (aura). This is WAD from the LockerService perspective.

Instead of using using <aura:unescapedHtml>, try setting the innerHTML of a standard DOM element like a <div>, or use the dynamic DOM creation APIs such as Document.createElement() and HTMLTableElement.insertRow().

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.