Views 'uses AJAX' with exposed filter prevents modal opening

Question

I have a views page which displays rows of teasers. Clicking on the H4 title opens a Foundation reveal modal. Here is the views template:

<li class="m-social-modal__item column column-block">
<div class="m-social-modal__card">
    <div class="m-social-modal--image"><img src="<?php print $fields['field_image']->content; ?>" /></div>
    <div class="m-social-modal__content">
        <h4 data-open="<?php print 'modal' . $fields['nid']->raw; ?>"><?php print $fields['title']->raw; ?></h4>
        <p class="m-social-modal__text"><?php print $fields['body_1']->content; ?></p>
    </div>
</div>
</li>

<div class="reveal" id="<?php print 'modal' . $fields['nid']->raw; ?>" data-reveal>
<div class="m-social-modal--modal-image"><img src="<?php print $fields['field_image']->content; ?>" /></div>
    <h4 class="m-social-modal__title"><?php print $fields['title']->raw; ?></h4>
    <div ><?php print $fields['body']->content; ?></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
</button>
</div> 

The title field (Content: Title) is linked to the original piece of content, and is printed $fields['title']->raw instead of $fields['title']->content as I want the Foundation reveal modal to appear, not the page node.

I've added an exposed filter (Content: Has taxonomy term - Select terms from vocabulary Tags) with 'Use AJAX' (found under 'Other' in the Page Display details of the view). Once the category has been selected it's autosubmitted and the teasers which have been tagged accordingly are displayed.

All good so far, however, I can no longer open the Foundation reveal modal by clicking on the H4 title link. Is there any way of resolving this?

I'm using views 7.x-3.20

Update Before clicking on the Exposed filter dropdown, the modal opens when you click on the h4 link. It toggles the display from 'none' to 'block':

Before clicking the link:

<div class="reveal-overlay" style="display: none;"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="true" data-yeti-box="modal10337" data-resize="modal10337" data-e="x4w41x-e" tabindex="-1" style="display: none; top: 59px;">

After clicking the link:

<div class="reveal-overlay" style="display: block;"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="false" data-yeti-box="modal10337" data-resize="modal10337" data-e="x4w41x-e" tabindex="-1" style="display: block; top: 59px;">

However after clicking on the Exposed filter dropdown and selecting a category there is no style element:

<div class="reveal-overlay"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="true" data-yeti-box="modal10337" data-resize="modal10337" data-e="3gejw6-e">