JQuery - 如何将 OnChange 处理程序添加到 IFrame 中的文本框答案

【问题标题】：JQuery - how to add an OnChange handler to Textbox in an IFrameJQuery - 如何将 OnChange 处理程序添加到 IFrame 中的文本框
【发布时间】：2019-09-03 23:23:01
【问题描述】：

我有一个使用 Telerik TabStrip 的 ASP 页面。其中一个选项卡的内容是 iFrame ，源代码只是一个带有文本框的基本 HTML 页面。

页面如下所示：

 <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1"  MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="MetroTouch">
            <Tabs>
                <telerik:RadTab Text="AppX" Width="400px"></telerik:RadTab>
                <telerik:RadTab Text="Cognitive Search" Width="200px"></telerik:RadTab>
                <telerik:RadTab Text="About" Width="200px"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" Height="100%" 
          Width="100%"  SelectedIndex="0" CssClass="outerMultiPage">

            <telerik:RadPageView runat="server" ID="RadPageAppX" Height="90%" 
           Width="100%">

                  **<iframe src="AppX.html"**  style="position: absolute; height: 
            90%; border: none" runat="server" id="IFrameAppX" name="IFrameAppX"  
            />

            </telerik:RadPageView>

选项卡中的 HTML 页面是 AppX.html，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <input id="SearchTerm" type="text"  value="SEARCH-TERM" 

</body>
</html>

当页面加载时，我需要向页面中的 SearchTerm 添加一个 OnChange 处理程序，该处理程序位于 iFrame 中。我尝试了以下方法，但没有任何效果。

   $(document).ready(function () {
         $("#MainContent_IFrameAppX#SearchTerm").bind("change", function () 
   {
              console.log("OnChange");
           });


  $("#IFrameAppX").contents().find('SearchTerm').bind("change", function () 
   {

                var frame = document.getElementById("IFrameAppX");
                var txt = 
     frame.contentWindow.$(SearchTerm).val("hello").change();

            });




 $("#MainContent_IFrameAppX").contents().find('SearchTerm').bind("change", 
 function () {
                    console.log("OnChange");
                });

知道我做错了什么吗？提前谢谢

【问题讨论】：

标签： jquery telerik

【解决方案1】：

我认为您在 SearchTerm 之前遗漏了 #

$("#IFrameAppX").contents().find('#SearchTerm').on("change", function () 
{
   //do stuff
}

【讨论】：

【解决方案2】：

必须等待 iFrame 加载才能附加处理程序！

        $("#IFrameAppX").ready(function () {                        
              $("#MainContent_IFrameAppX").contents().find("#SearchTerm").bind("change", function () {
                        console.log($("#MainContent_IFrameAppX").contents().find("#SearchTerm").val());
                        alert("Change");
                    });
                  });

【讨论】：