javascript - 如何在 jquery 中使用“on”方法绑定 iframe？

Question

在 jquery 中使用on方法绑定 iframe 。

我在页面中使用带有 iframe 的 jquery 移动库。

$(frame).contents().on('tap', 'div', function() { console.info('sucess')} )}

如何使用on方法绑定 iframe？

在这里，我尝试使用on方法将tap函数绑定到 iframe 内容。

//Structure of HTML page

<div  data-role="page" id="test" tabindex="0" class="ui-page ui-body-c" style="min-height: 491px;">
    <iframe height="491" frameborder="0" width="100%" src="about:blank" name="test">
        // ...
        <div id="one" data-role="page">
            <div data-role="content">
                // Contents
            </div>
        </div>
        // ...
    </iframe>
</div>

点击 方法 将$(frame).contents().click(function(e) { alert('sucess'); })起作用。但是当它带有移动设备时，点击方法不起作用......

Answer 1

我会尝试为 iFrame 设置一个 ID 并像这样绑定它：

$('#iFrameId).on('tap', 'div', function() { console.info('sucess'); });

请记住，您需要在JQuery mobile 加载的第一页中包含的脚本中创建事件绑定。按照设计，稍后加载的其他文件中包含的所有 JS 脚本都将被忽略。

Answer 2

jsbin

您需要将处理程序附加到 iframe 的 contentDocument：

$($frame[0].contentDocument).on('click', '#tap', function(){
    alert('success');
});