0

私は JQuery を初めて使用し、仕事で多くの JQuery と AJAX を実行する必要があるため、より多くのことを学ぼうとしています。今、私はこの練習プロジェクトを持っており、これを使って JQuery をいじっていますが、この問題の原因がわかりません。

Web サイトの構造は次のとおりです - いくつかのボタンを含む iframe を含むインデックス html - 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 に答える