jQuery val() 返回 undefined，prepend() 不会以 jQuery 样式追加，也无法更改文本输入大小

Question

我有很多问题，也许是同一问题引起的。

这是我的代码：

        <h2>Aufgaben:</h2>
        <div data-role="fieldcontain">
        <ul id="exercise-list" data-role="listview" data-inset="true">
            <li id="addExercise">Aufgabenname: <input type="text" name="aufgabenname" id="aufgabenname" size="20" maxlength="20"></input> Maximalpunktzahl: <input type="text" name="maxPunkte" id="maxPunkte" size="2" maxlength="2"></input><div style="float:right;"><button id="add" data-icon="plus" data-iconpos="notext"></button></div></li>
        </ul>
        </div>
        <script>
            $("#add").on("click", function() {
                var aufgabenname = $("aufgabenname").val();
                var maxPunkte = $("maxPunkte").val();
                $("#addExercise").prepend("<li>Aufgabe: "+aufgabenname+", Maximalpunktzahl: "+maxPunkte+" <div style="float:right;"><button class="delete" data-icon="delete" data-iconpos="notext"></button></div></li>");
            });
        </script>

我可以创建一个新的<li>，但是aufgabenname和maxPunkte是未定义的。此外，<li>元素不会以jQuery样式炫耀，尤其是该按钮不是预期的。无论我在size属性中放置什么。

Answer 1

您需要使用#来定位id。从：

更改

var aufgabenname = $("aufgabenname").val();
var maxPunkte = $("maxPunkte").val();

to：

var aufgabenname = $("#aufgabenname").val();
var maxPunkte = $("#maxPunkte").val();

小提琴演示

Answer 2

 var maxPunkte = $(#"maxPunkte").val();

有一个问题;

var maxPunkte = $("#maxPunkte").val();

Answer 3

可能会发出：您需要在jQuery的ready event fired之后调用jQuery功能。大小和最大长度它正常工作。maxLength，有多少个char用户可以输入和大小确定可见宽度，字符中的可见宽度。

       <h2>Aufgaben:</h2>
        <div data-role="fieldcontain">
        <ul id="exercise-list" data-role="listview" data-inset="true">
            <li id="addExercise">Aufgabenname: <input type="text" name="aufgabenname" id="aufgabenname" size="20" maxlength="20"></input> Maximalpunktzahl: <input type="text" name="maxPunkte" id="maxPunkte" size="2" maxlength="2"></input><div style="float:right;"><button id="add" data-icon="plus" data-iconpos="notext"></button></div></li>
        </ul>
        </div>
        <script>
      $(document).ready(function() {
            $("#add").on("click", function() {
                var aufgabenname = $("#aufgabenname").val();
                var maxPunkte = $("#maxPunkte").val();
                $("#addExercise").prepend("<li>Aufgabe: "+aufgabenname+", Maximalpunktzahl: "+maxPunkte+" <div style="float:right;"><button class="delete" data-icon="delete" data-iconpos="notext"></button></div></li>");
            });
});
        </script>

小提琴演示