0

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

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

索引.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(label) 但由于某种原因，但是当文本框的值始终未定义时，即使我更改了文本框内的值也是如此。

我在这里想念什么？

4

2 回答 2

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(){}); 包装脚本

于 2013-10-25T22:38:53.667 回答
0

我不认为 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>

于 2013-10-25T03:12:50.590 回答