Событие «изменить» события textarea внутри iframe

Question

Событие «изменить» события textarea внутри iframe

0

У меня есть страница (index.htm), которая содержит iframe (iframe.htm) из того же домена.

Внутри iframe есть элемент textarea, который обрабатывает свое событие "change".

На главной странице есть код jquery, который изменяет содержимое textarea с помощью val(). Затем я пытаюсь запустить событие "change", вызывающее функцию 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>

iZverev 21 фев. 2014, в 13:37

Источник

0

попробуйте использовать .trigger ('change') вместо .change ()
Sai 21 фев. 2014, в 12:09
0

change () делает то же самое, это просто ярлык
iZverev 24 фев. 2014, в 08:18

Теги:

javascript

jquery

textarea

iframe

events

2 ответа

1

попробуй это:

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

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

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

Martin Da Rosa 21 фев. 2014, в 09:45

0

Спасибо, это тоже должно сработать, но реальная логика моего приложения сложнее и мешает мне так поступать. Пожалуйста, посмотрите на мой собственный ответ. Не могу проголосовать за вашу, не иметь репутацию :)
iZverev 24 фев. 2014, в 08:27

Ещё вопросы

попробуйте использовать .trigger ('change') вместо .change ()
change () делает то же самое, это просто ярлык
Спасибо, это тоже должно сработать, но реальная логика моего приложения сложнее и мешает мне так поступать. Пожалуйста, посмотрите на мой собственный ответ. Не могу проголосовать за вашу, не иметь репутацию :)

iZverev · Accepted Answer · 2014-02-24T06-09-00.000Z

Я решил это. Проблема в том, что с использованием iframe у нас есть другой экземпляр jQuery внутри. Чтобы запустить событие, следует обратиться к этому экземпляру jQuery, помещенному в iframe, вместо родительского.

Поэтому вместо

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

просто используйте

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

Надеюсь, это поможет кому-то. Я потратил несколько часов на поиски причины этой ошибки :)