Question

我是JQuery的新手并且尝试了解更多，因为我的工作需要我做很多JQuery和AJAX。现在我有这个练习项目，我用来玩JQuery，我似乎无法弄清楚这个问题的原因。

这是网站的结构 - 索引带有iframe的html，其中包含几个按钮 - 每个iframe的几个html文件

的index.html

<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">

<a href="1.html" target="main"><div id="btn1" style="float:left"> <p> About Us </p> </div> </a>
<a href="2.html" target="main"><div id="btn2" style="float:left"> <p> Objective </p> </div> </a>
<a href="3.html" target="main"><div id="btn3" style="float:left"> <p> Constrains </p> </div> </a>
<a href="4.html" target="main"><div id="btn4" style="float:left"> <p> Modelling </p> </div> </a>
<a href="5.html" target="main"><div id="btn5" style="float:left"> <p> Contact Us </p> </div> </a>
<a href="6.html" target="main"><div id="btn6" style="float:left"> <p> Feedback </p> </div> </a>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>

2.html - 我的文本框所在的位置

<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
    <table width="100%" border="1" cellpadding="0">
        <tr>
            <td>Objective Function:</td>
            <td colspan="2"><label id="msg">Your Objective Function</label></td>        
        </tr>
        <tr>
            <td></td>
            <td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
            <input type="button", id="Btnclear", value="Clear"> 
            </td>
        </tr>
        <tr>
            <td>Enter Objective Function values:</td>
            <td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>        
            <td><input type="button", id="Add_var_button", value="Add Variables"></td>    
        </tr>
    </table>
</form>

main.js

$(document).ready(function(){
  $("#main").load(function(){   
     $("#main").ready(function(){       
        // now read contents        
        $("#main").contents().find("#Add_var_button").click(function(){                                 
            alert("button is clicked"); 

            alert($("#main").contents().find("#Obj_coef1").val());                                                  
            //alert($("#main").contents().find("#Obj_coef1").val());
            //var coef = $("#main").contents().find("#Obj_coef1").val();            
            //var var_name = $("#main").contents().find("#Var_name1").val();                        
            //var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
            //var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");             
            //alert("coef = " + coef);
            //alert("var = " + var_name);
            //$("#main").contents().find("#msg").text("Jquery changed the text");
            //$("#main").contents().find("#msg").append(" appended");
        });         
    });     
  });
});

每次我点击警报出现的按钮，我也可以将文字附加到#msg（标签）但由于某种原因，但是当文本框的值总是未定义时，即使我更改了文本框内的值。

我在这里缺少什么？

Answer 1

我明白了。

这是我的剧本

var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
    alert("iframe ready");
    // get textboxes and buttons
    var btnClear = iframe.contents().find("#Btnclear");
    var btnAddVar = iframe.contents().find("#Add_var_button");
    var btnAdd = iframe.contents().find("#Addbutton");
    var btnSub = iframe.contents().find("#Subbutton");
    var msg = iframe.contents().find("#msg");
    var obj_coef_input = iframe.contents().find("#Obj_coef1");
    var var_name_input = iframe.contents().find("#Var_name1");

    btnAddVar.click(function(){
        alert("btn add clicked");
        btnAdd.prop('disabled',false);
        btnSub.prop('disabled',false);

    });         

    btnClear.click(function(){
        alert("btn add clicked");
        obj_coef_input.prop('value', "");
    });

});

}）;

哦，别忘了添加$（document）.ready（function（）{}）;包装脚本

Answer 2

我认为find（）方法无法正常工作。我建议只使用jQuery选择器来获取值。这是一个例子：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#button").click(function(){ 
                    var text = $('#blah').val();    
                    alert(text);
                })
            });
        </script>
    </head>
<body>
    <input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>

iframe中的文本框值未定义

2 个答案: