Question

我有一个页面（ index.htm ），其中包含来自同一域的iframe（ iframe.htm ）。

在iframe内部有一个 textarea 元素来处理其“更改”事件。

主页面上有一个jquery代码，用于使用val（）更改textarea内容。然后我试图触发调用change（）函数的'change'事件。

然而，这不起作用。值更改，但“更改”事件不起作用。如果textarea不在iframe内，这将按预期工作。

问题：如何在iframe内的元素上强制触发事件？

iframe.htm：

<html>
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
    $(document).ready(function () {
        $("textarea").bind("change", function () {
            alert("changed"); });
    });
    </script>
</head>
<body>
    <textarea id="txt"></textarea>
</body>
</html>

的index.htm：

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#btn").bind("click", function () {
            var frame = document.getElementById("frame");
            var txt = frame.contentDocument.getElementById("txt");
            $(txt).val("hello").change();
        });
    });
</script>
</head>
<body>
    <iframe id="frame" src="iframe.htm"></iframe>
    <button id="btn">Fire change</button>
</body>
</html>

Answer 1

试试这个：

    $iframe = $('#iframe').contents().find('#txt');

    $iframe.on('change',function(){
      var val = $(this).val();
      console.log(val);
    });

   $('#btn').click(function(){
      $iframe.trigger('change');
   });

Answer 2

我已经解决了这个问题。问题是使用iframe我们内部有不同的jQuery实例。要触发事件，应该引用iframe嵌套的jQuery实例而不是父实例。

所以而不是

$(txt).val("hello").change();

只需使用

frame.contentWindow.$(txt).val("hello").change();

希望这会对某人有所帮助。我花了几个小时寻找这个错误的原因：）

iframe内的textarea fire'change'事件

2 个答案: