Question

我有一个使用div格式化的表单来放置各种输入。我想隐藏提交按钮，直到用户填写所有输入。我正在使用jquery来实现这一点，它在未格式化的表单中工作正常。当我将输入框放在div中时，jquery不再起作用。有人可以建议为什么会这样吗？

这是我的代码：

<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>

Answer 1

输入元素不是其后代形式的子元素，因此不是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

Answer 2

由于您已将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();
            }
    });
});

Answer 3

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(){});

jquery在使用div的表单中无法正常工作

3 个答案: