插入内容后，iframe中的点击处理程序无法正常工作

Question

So I'm currently working on a small styleguide application and part of the functionality is that there is a sandbox area where certain modules get loaded into an iframe (to be able to simulate media queries). Now this content is inserted dynamically after the iframe is created along with the relevant styling and scripts.

The non event handler scripts work fine for example an alert box but the click handlers don't seem to be functional. Jquery is loaded in just fine so I've ruled that out.

This is a sample of the code being inserted

    <!-- Accordion-->
<div class="accordion module-suggestions col-sm-3 col-xs-12 pull-right hidden-xs">
            <h4>Most popular</h4>
            <div class="accordion-section active">
                <ul>
                    <li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
                    </li>
                    <li>How to measure performance of SMEs<span class="result-type guides"></span>
                    </li>
                    <li>How to measure performance <span class="result-type checklist"></span>
                    </li>
                </ul>
            </div>
            <h4>Most recent</h4>
            <div class="accordion-section">
                <ul>
                    <li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
                    </li>
                    <li>How to measure performance of SMEs<span class="result-type guides"></span>
                    </li>
                    <li>How to measure performance <span class="result-type checklist"></span>
                    </li>
                </ul>
            </div>
            <h4>Recommended</h4>
            <div class="accordion-section">
                <ul>
                    <li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
                    </li>
                    <li>How to measure performance of SMEs<span class="result-type guides"></span>
                    </li>
                    <li>How to measure performance <span class="result-type checklist"></span>
                    </li>
                </ul>
            </div>
        </div>
<!-- / Accordion  -->

<script>
function accordion() {
    var accordion = $('.accordion h4');
    var accordionSection = $('div.accordion-section');
    $(accordion).on("click", function(e) { 

        if (!$(this).next(accordionSection).is(":visible")) {
             $(accordionSection).is(":visible") && $(accordionSection).slideUp();   
             $(this).next(accordionSection).slideDown();  
        }
    });
}
accordion();
</script>

Just to clarify, the code is being put directly inside the iframe's HTML, I'm not calling it from it's parent.

The code responsible for inserting the html/js into the iframe:

iframePreview.contents().find('html').html( libraryScripts + '\\n' + moduleHtmlAndJs);

Any idea how I can make these click handlers functional?

Answer 1

You could simplify this by using slideToggle and access the closest accordion-section within the handler.

Try this:

function accordion() {
    $('.accordion').on("click","h4", function() { 
          var accordionSection = $(this).next('div.accordion-section');
          $(accordionSection).slideToggle();  
    });
}
accordion();

Example: http://jsfiddle.net/7fpt87yv/

Answer 2

It seems that .html() strips out <script> tags.

How to prevent jquery from removing the <script> tags

Try to use .innerHTML instead:

iframePreview.contents().find('html').[0].innerHTML =  libraryScripts + '\n' + moduleHtmlAndJs;

Answer 3

Rather than injecting your script into the iframe couldn't you create the function at global level on the iframe contentWindow itself?

For example:

iframePreview.contentWindow.accordion = function(){
      $('.accordion').on("click","h4", function() { ... etc...});
}

Then call that function once you've inserted your html:

 iframePreview.contentWindow.accordion();

So - you set the function from the parent window on the iFrame and call it from the parent once the HTML is in place.