Javascript 插入内容后，Iframe中的单击处理程序不起作用

因此，我目前正在开发一个小型的styleguide应用程序，其部分功能是有一个沙箱区域，其中某些模块被加载到iframe中（以便能够模拟媒体查询）。现在，在创建iframe以及相关样式和脚本之后，将动态插入此内容

非事件处理程序脚本可以正常工作，例如警报框，但单击处理程序似乎不起作用。Jquery加载得很好，所以我排除了这种可能性

这是正在插入的代码的示例

    <!-- 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>

最受欢迎

为什么你的闭路电视会把你关进监狱

如何衡量中小企业的业绩

如何衡量绩效


最近的

为什么你的闭路电视会把你关进监狱

如何衡量中小企业的业绩

如何衡量绩效


推荐

为什么你的闭路电视会把你关进监狱

如何衡量中小企业的业绩

如何衡量绩效


功能手风琴（）{
var accordion=$（'.accordion h4'）；
var accordionSection=$（'div.acordionSection'）；
$（手风琴）。在（单击）上，函数（e）{
if（！$（this）.next（accordionSection）.is（“：可见”））{
$（accordionSection）.is（“：visible”）和&$（accordionSection）.slideUp（）；
$（this）.next（accordionSection）.slideDown（）；
}
});
}
手风琴（）；

只是澄清一下，代码直接放在iframe的HTML中，我不是从它的父级调用它

负责将html/js插入iframe的代码：

iframePreview.contents（）.find（'html'）.html（libraryScripts+'\n'+moduleHtmlAndJs）

---

您知道如何使这些单击处理程序正常工作吗？

您可以使用slideToggle并访问处理程序中最近的手风琴部分来简化此操作

试试这个：

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

示例：

似乎

.html（）

去掉了

标记

尝试改用

.innerHTML

：

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

---

您不能在iframe contentWindow本身的全局级别上创建函数，而不是将脚本注入iframe吗

例如：

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

然后在插入html后调用该函数：

 iframePreview.contentWindow.accordion();

---

因此-您可以从iFrame上的父窗口设置函数，并在HTML就位后从父窗口调用它。

您在哪里调用accordio（）？脚本标记内的所有内容都在iFrame内运行。委托单击事件：我的accordion代码在iFrame外运行良好。这不是问题。抱歉，如果不清楚，但问题不是我的手风琴代码，因为它在iframe之外工作正常。问题是点击处理程序甚至没有响应。