IPS.Pages blocks and jQuery

[PatrickRQ]

Hi,

Basically I have problem with feed blocks created from pages. I want to implement jQuery script along with specific block, however there seems to be load order issue because in console I see "jQuery is not defined", so things simply do not work as should.

I tried to wrap entire script inside: document.addEventListener("DOMContentLoaded", function(event) { ... }); that makes jQuery not defined error gone but still things do not work. I noticed that IPS.Pages blocks do not properly load pseudo-code style elements such as :before or :after, they are simply ignored and not applied. Same story with "data-role"s, seems like not being considered.

Example block code

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  ;( function($, _, undefined){
	"use strict";

	ips.controller.register('site.front.site.FAQ', {
		initialize: function () {
			this.on( 'click', '[data-role="question"]', this.clickQuestion );
		},

		clickQuestion: function (e) {
			var thisQuestion = $( e.currentTarget );

			if( thisQuestion.hasClass('sFAQ__q--active') ){
				thisQuestion
					.removeClass('sFAQ__q--active')
					.find('[data-role="answer"]')
						.slideUp();
			} else {
				thisQuestion
					.addClass('sFAQ__q--active')
					.find('[data-role="answer"]')
						.slideDown();
			}
		}
	});
}(jQuery, _));
});
</script>

{{if !empty( $records ) }}
<div class="sFAQWrap">
  <ul class="sFAQ" data-controller="site.front.site.FAQ">
	<li>
		<h2>{$title}</h2>
			<ul class="ipsList_reset">
                {{foreach $records as $record}}
						<li class="sFAQ__q" data-role="question">
							<h3 class="h3">$record->_title</h3>
                          		<a href="{$record->url()}" class="ipsButton ipsButton_light ipsButton_narrow ipsButton_verySmall ipsCopyToClipboard enabled" data-ipstooltip="true" data-ipsdialog style="top: 8px; right: 8px;" _title="Product FAQ"></a>
								<div data-role="answer" style="display: none">
									<p class="text text--smaller sFAQ__q_text">$record->content</p>
                                  
								</div>
              			</li>       
          		{{endforeach}}            
          	</ul>
    </li>
  </ul>
	<hr class="ipsHr">
	<p class="text">
		Please <a href="/contact">contact us</a> if you have any other questions - we'd be happy to help.
	</p>
</div>
{{endif}}

Has anyone experienced similar problem? any suggestions?