Fire «изменение» событие текстового поля внутри фрейма

У меня есть страница (index.htm), содержащий IFrame (iframe.htm) из того же домена.Fire «изменение» событие текстового поля внутри фрейма

Внутри 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>

источник

2014-02-21 iZverev

попробуйте использовать .trigger ('change') вместо .change() – Sai

change() делает то же самое, это просто ярлык – iZverev

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

Таким образом, вместо

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

просто использовать

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

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

источник

2014-02-24 08:24:56 iZverev

попробовать это:

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

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

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

источник

2014-02-21 12:15:31

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

Fire «изменение» событие текстового поля внутри фрейма

ответ

Смежные вопросы