Question

我在嵌套在动态加载的iframe中的脚本中遇到focus(function(){})和blur(function(){})的问题。

以下是动态加载iframe的脚本标记。我抛入脚本标记的任何事件都不起作用，像$('input').click(function(){alert('fired')});这样的简单事情甚至都不会运行。我不确定发生了什么。

是的，jQuery正被加载到头部的iframe中。

<script type="text/javascript">
// <![CDATA[
    $(document).ready(function() {

        $('.form .field-content').find('input, select, textarea').focus(function() {
            $(this).closest('.field').addClass('focused');
        });

        $('.form .field-content').find('input, select, textarea').blur(function() {
            $(this).closest('.field').removeClass('focused');
        });

        $('.form .field-content').find('input, select').keypress(function(e) {
            if (e.which == 13) {
                e.preventDefault();
                $(this).closest('.form').find('.button').first().click();
            }
        });

        $('.form .button').focus(function() {
            $(this).addClass('focused');
        });

        $('.form .button').blur(function() {
            $(this).removeClass('focused');
        });

        // focus on first field
        $('.form .field-content').find('input, select, textarea').first().focus();

    });
// ]]>
</script>

Answer 1

问题可能是iframe内容尚未加载，请尝试

$("#Your-Iframe-Id").load(function (){
    // write your code here
});

Answer 2

对于动态加载的内容，您应该查看jQuery live()函数

Answer 3

iframe加载的URL是否与父容器不同？如果是这样，您将无法使用javascript来操纵其内容。

Answer 4

我想：

$('.form .field-content').find('input, select, textarea').focus(function() {
        $(this).closest('.field').addClass('focused');
    });

应该是：

$('.form .field-content').find('input, select, textarea').each(function(index) {
        $(this).focus(function(){
           alert('element ' + index + ' focused');
         });
         alert('bind focus event in element ' + index);
    });

欢呼声。

Answer 5

它可能与浏览器中的安全性有关。摆弄区域的一些设置，看看是否有帮助。

您使用的浏览器是什么？

jQuery事件在iframe中不起作用？

5 个答案: