Jquery自定义事件到其他文档不起作用

时间:2016-03-11 12:56:45

标签: javascript jquery javascript-events

请考虑此测试:

主要文件:

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script>
          var secondwindow = false;
          $(function() {
              secondwindow = window.open("secondwindow.html");
              $(secondwindow).load(function() {
                  secondwindow.setWindow(window);
              })
              $("#custom").click(function() {
                  $(document).trigger("custom");
              });
          });
      </script>
  </head>
  <body>
      <button id="click">Click event</button>
      <button id="custom">Custom event</button>
  </body>
</html>

第二个(弹出式)文件:

 <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
            var mainwindow = false;

            function setWindow(obj) {
                mainwindow = obj;
                $(mainwindow.document).on("click", function() {
                    $("body").append("<p>Click event from main window</p>");
                });
                $(mainwindow.document).on("custom", function() {
                    $("body").append("<p>Custom event from main window</p>");
                });
            };
        </script>
    </head>
    <body>
    </body>
 </html>

我的目标是在第二个窗口中为主窗口中的自定义事件添加一个事件监听器。

我发现,这个测试可以证明,事件听其他窗口适用于标准&#34;点击事件,而不是自定义事件

你能告诉我这是一个jquery限制还是我错过了什么?

(对不起,我不能把这些代码放在jsfiddle中因为window.open与jsfiddle不能很好地工作)

1 个答案:

答案 0 :(得分:1)

问题是您需要考虑用于定义目标和触发器的jQuery实例。

secondwindow.html -> $(mainwindow.document)

不同
main.html -> $(document)

需要:

secondwindow.html -> mainwindow.$(mainwindow.document)

或者反过来:

main.html -> secondwindow.$(document)
secondwindow.html -> $(mainwindow.document)
jQuery事件由jQuery.event对象管理,这与正在使用的jQuery实例相关联。例如,您可以通过这种方式获取注册的事件:

 $.event.global

您将看到注册的事件不仅依赖于选择器本身,还依赖于jQuery实例。这就是点击事件和自定义事件的情况。