jquery不能正常工作在窗體與div

我有一個格式使用divs來放置各種輸入。我想隱藏提交按鈕，直到用戶填寫所有輸入。我正在使用jquery來實現這一點，並以無格式的形式正常工作。當我把輸入框放在一個div中時，jquery不再起作用。任何人都可以建議爲什麼這會發生請嗎？jquery不能正常工作在窗體與div

這裏是我的代碼：

<script src="includes/jquery-2.0.3.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("#submit_button").hide(); 

    $('form > input').keyup(function(){ 
     var empty = false; 
     $('form > input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 
     if (empty) { 
       $("#submit_button").hide(); 
      } else { 
       $("#submit_button").show(); 
      } 
    }); 
}); 
</script> 
</head> 

<body> 
<div id="form"> 
<!-- The Results Entry Form - redirects to update page--> 
<form action="ryder_front_update.php" method="post"> 
    <div id="title"> 
    <!-- Enter the name of the course for the form  --> 
    EMG Ryder Cup - *FRONT* - Better-Ball RESULT 
    </div> 
<!-- Enter the name of file of players if necessary --> 
    <div id="player">Select Player:&nbsp;&nbsp; 
    <span><select id="player_name" name="player" class="input" size="1" /></span> 
        <option value="null">Select player username</option> 
        <option value="247thDustoff">247thDustoff</option> 
        <option value="54david">54david</option> 
        <option value="alantudor7554">alantudor7554</option> 
        <option value="caucus">caucus</option> 
        <option value="crosshatch">crosshatch</option> 
        <option value="dollertree">dollertree</option> 
        <option value="Eviscera">Eviscera</option> 
        <option value="flubdubber">flubdubber</option> 
        <option value="FuzzyJones">FuzzyJones</option> 
        <option value="jchong">jchong</option> 
        <option value="jrinkc">jrinkc</option> 
        <option value="kerison">kerison</option> 
        <option value="Racenut14">Racenut14</option> 
        <option value="rikbeekman">rikbeekman</option> 
        <option value="robin1962">robin1962</option>     
        <option value="stevegeorge57">stevegeorge57</option> 
        </select> 
    </div> 
    <div id="holes">Hole scores: <!-- If I remove the "holes" div tags the jquery works perfectly --> 
        &nbsp;&nbsp;&nbsp;&nbsp;1<input id="hole01" type="text" name="h1" class="input1"/> 
        &nbsp;&nbsp;2<input id="hole02" type="text" name="h2" class="input1"/> 
        &nbsp;&nbsp;3<input id="hole03" type="text" name="h3" class="input1"/> 
        &nbsp;&nbsp;4<input id="hole04" type="text" name="h4" class="input1"/> 
        &nbsp;&nbsp;5<input id="hole05" type="text" name="h5" class="input1"/> 
        &nbsp;&nbsp;6<input id="hole06" type="text" name="h6" class="input1"/> 
        &nbsp;&nbsp;7<input id="hole07" type="text" name="h7" class="input1"/> 
        &nbsp;&nbsp;8<input id="hole08" type="text" name="h8" class="input1"/> 
        &nbsp;&nbsp;9<input id="hole09" type="text" name="h9" class="input1"/> 
    </div> <!-- If the above inputs are in the div the jquery code does not work--> 
    <div id="submit"> 
        <input type="submit" id="submit_button" width="52" value="Submit" height="19" border="0" />     
    </div> 
    </form> 
</div> 
</body> 
</html>

來源

2013-12-19 Tony Scott

的'>'選擇器選擇孩子。這顯然不是你想要的，因爲你的表單的孩子是div。 –

輸入元素不是他們的後裔形式的孩子，這樣反而child selector使用descendant selector

$(document).ready(function(){ 
$("#submit_button").hide(); 

    $('form input').keyup(function(){ 
     var empty = false; 
     $('form input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 
     if (empty) { 
       $("#submit_button").hide(); 
      } else { 
       $("#submit_button").show(); 
      } 
    }); 
});

演示：Fiddle

來源

2013-12-19 17:07:48

謝謝 - 我自己有7個孩子（更愚弄我！），他們都是後代不是他們嗎？如果我只知道差異！事情是 - 我不明白的是提交按鈕是一個「輸入」。 –

由於您已將div添加到表單元素中，input標記變爲descendant而不是children

嘗試，

$(document).ready(function(){ 
    $("#submit_button").hide(); 
    $('form input').keyup(function(){ 
     var empty = false; 
     $('form input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 
     if (empty) { 
       $("#submit_button").hide(); 
      } else { 
       $("#submit_button").show(); 
      } 
    }); 
});

來源

2013-12-19 17:08:17

parent > child（子選擇器），讓所有的即時孩子，而parent child（後代選擇器）將搜索所有元素層次

例子：

<ul> 
    <li>Item 1</li> 
    <li>Item 2 
    <ul> 
     <li>Item 2.1</li> 
     <li>Item 2.2</li> 
    </ul> 
    </li> 
    <li>Item 3</li> 
</ul> 

$("ul > li").addClass("newClass");

增加類「newClass」到1 2和3，而：

$("ul li").addClass("newClass");

將類「newClass」添加到每個列表元素（1,2,3，2.1,2.2）。

這樣試試：

$('form input').keyup(function(){});

來源

2013-12-19 17:20:48

jquery不能正常工作在窗體與div

回答

相關問題