Question

我有代码将创建一个子窗口，在这个窗口中，我想能够在用户点击其中一个已定义的html元素时触发警报。代码将按照我想要的方式在主窗口中工作，但是当我将它应用到子窗口时，它不起作用。

当下面的方法运行时，它会将“Window loaded”输出到控制台窗口，但它不会启动click事件。

function OpenUrl()
{
    var url = $("#urltoopen").val();
    var childwindow = window.open(url, '', 'width=800, height=500');
    childwindow.focus();
    $(document, childwindow.document).ready(function(){
        console.log("Window loaded");
        $( "div, span, li, ul, ol, input, button", childwindow).click(function(e) {
            console.log("Child click event");
            e.preventDefault();
            e.stopPropagation();
            alert("element clicked");
        });
    }); 
}

Answer 1

使用jquery contents函数查找子窗口元素

这是一个工作样本在localserver上试试

<强> main.html中

   <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      </head>
  <body>

      <button onclick=OpenUrl()>OPEN</button>

<script>

    function OpenUrl(){

var childwindow = window.open('test.html', '', 'width=800, height=500');
$(childwindow.document).ready(function(){

    setTimeout(function(){

        $(childwindow.document).contents().find( "button").click(function(e) {
            console.log("Child click event");
        });
    },500);
}); 
}



 </script>

<强>的test.html

<html>

<body>

<button>test</button>
</body>

</html>

Answer 2

检查$( "div, span, li, ul, ol, input, button", childwindow)是否包含任何选择？

如果有任何选择，请在新窗口中检查所选元素的大小是否正确。

Jquery将click事件绑定到子窗口中的元素

2 个答案: