Question

我在另一页显示1个html页面。我没有使用框架。相反，我利用了javascript并在页面中显示不同的页面。在这里，我将提供如何在另一个网页中显示网页的示例代码。

<html>
<head>
    <title>Test</title>     
    <style>
        #headerDiv{         
            top: 0;
            width: 100%
            display: block;
            //border-bottom: 3px solid #808080;
        }
        #headerHR{                                              
            width: 100%;
            height: 1px;
        }
        #headerImg{
            float: left;
            margin-top: 0px;
            margin-left: 0px;
        }
        #headerPre{
            float: left;
            font-family: "Arial", Helvetica, sans-serif;
            font-style: normal;
            font-weight: bold;
            font-size: 24px;
        }
        #navDiv{
            position: absolute;             
        }
        #gapFillerDiv{
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="./jquery/jquery-1.12.4.min.js"></script>        
    <script type="text/javascript">
        $(document).ready(function(){               
                    $('#sensors').load('./nav.html');
           });
    </script>
    <script type="text/javascript">

    </script>
</head> 
<body>
    <div id="headerDiv">
        <img id="headerImg" src="./assets/dummyLogo.png" width="280" height="125" alt="DummyLogo"/>
        <pre id="headerPre">
                 Test Series
        Test Solutions
        </pre>                  
        <hr id="headerHR">
    </div>      
    <p id="test"></p>
    <div id="sensors"  style="position: fixed; top: 138px;"></div>      
</body>

在上面的代码中，我在名为test.html的页面中显示了一个网页nav.html。在nav.html中有一个简单的按钮。我想在test.html页面本身查看test.html页面中显示的nav.html页面按钮的结果。我怎么做？

Answer 1

您可以像使用任何其他按钮一样使用按钮点击处理程序。

由于在DOM加载后将按钮添加到页面中，最简单的方法是使用带有附加选择器的jQuery＆＃39; .on()。像这样：

$(document).on('click', '#yourButton', function () {
    // your handler
});

只需将#yourButton替换为选择器以识别您的按钮即可。这种方式的工作方式是单击处理程序实际上附加到document，并且可以为文档中的任何位置的任何单击调用，但第二个选择器作为.on()的参数是一个应用于在调用事件时单击事件发起者的过滤器，以便它仅应用于目标元素。

我已经就这个here更深入地写了一些内容，因为我确信还有很多其他人也有。{/ p>

Answer 2

你可以这样做：

$('#sensors').on('click','button',function(){
   alert('button click in #sensors wrapper');
});

一页中的不同页面及其事件

2 个答案: