通过使用jquery的trigger方法 父页面无法触发子页面(iframe)的自定义事件

Question

今天在使用jquery的trigger方法时遇到了一个无法解决的问题,我想在父页面上去触发某个iframe页面里的某个元素的自定义事件,发现无法触发,然后我把自定义事件改成了click却可以触发,但这样传不了值.

直接上代码:

    <ul id="ul1">

        <li data-url="baidu.com">1</li>

        <li data-url="hupu.com">2</li>

    </ul>

    

    <div>

        <iframe src="test.html" id="test"></iframe>

    </div>

        $(function () {

            $("#ul1").on("click", "li", function () {

                $(this).css("color", "red").siblings().css("color", "#333");

                var url = $(this).attr("data-url");

                var frame = $("#test").prop("contentWindow").document;

                $(frame).find("#rec").trigger("custom", [url]);

            })

        })

上图是父页面的代码

下图为子页面(iframe)的代码

<span id="rec"></span>

        $(function () {

            $("#rec").on("custom", function (ev, url) {

                console.log(url);

            });

        })

这样无论如何也触发不了子页面span元素的custom事件,不知道为什么