-2

我习惯了像这样的javascript函数的语法：

function sample()
{

}


<input type="text" onclick="sampe()" />

一个简单的 onclick 甚至可以调用上面的 javascript 函数。我在互联网上找到了有关如何动态添加文本框的代码，现在我想制作自己的版本，但要做到这一点，我需要先了解它。我的左眼已经看不清楚了，所以搜索和阅读每本指南真的让我变得困难和沮丧。如果不是太多，如果有人可以向我解释以下代码的工作原理（FLOW），我将非常感激。我也不明白仅对添加按钮而不是其他按钮的 onclick 事件，但其他 2 个按钮仍然调用该函数。

<html>
<head>
<title>jQuery add / remove textbox example</title>
 <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var counter = 2;

        $("#addButton").click(function () {
            if (counter > 10) {
                alert("Only 10 textbox allowed");
                return false;
            }
            $('<div/>',{'id':'TextBoxDiv' + counter}).html(
                $('<label/>').html( 'Textbox #' + counter + ' : ' ))
                    .append( $('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
                    .appendTo( '#TextBoxesGroup' );
            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });

        $("#getButtonValue").click(function () {
            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
            }
            alert(msg);
        });
    });
</script>


</head>
<body>
<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
 <label>Textbox #1 : </label><input type='text' id='textbox1' name='textbox1' />
 </div>
</div>
<input type='button' value='Add Button' id='addButton' onclick="dynamictext()"/>
<input type='button' value='Remove Button' id='removeButton' />
<input type='button' value='Get TextBox Value' id='getButtonValue' />

</body>
</html>
4

1 回答 1

1

以下是“内联”事件处理程序：

onclick="dynamictext()"

在这种情况下，单击按钮时会调用名为 dynamictext 的函数。但是，由于您没有定义 dynamictext 函数，因此会引发异常。如果您想查看异常，请打开 Chrome 并按 ctrl+shift+J 打开控制台，然后运行您的代码。当您单击该按钮时，控制台将显示“未捕获的 ReferenceError：未定义动态文本”。注意：内联事件处理程序通常被认为是不好的做法，因为它们不会将行为（应该在 JavaScript 中定义）与内容（可以在 html 中定义静态内容或 JavaScript 用于动态内容）分开。

请注意，您不必onclick在 html 和 JavaScript 中分配处理程序。仅在您的 html 或仅在您的 JavaScript 中分配处理程序就足够了。（但是，如果您在 html 中分配了一个处理程序，您仍然必须定义您分配的函数（例如，在这种情况下为“动态文本”），而您在代码中未能做到这一点。

您提供的 Javascript 代码为您的三个按钮定义了 onclick 处理程序。在这里，我展示其中之一：

$("#addButton").click(function () { // This anonymous function (function without a name),
        if (counter > 10) {         // is executed when the button with id="addButton"
            alert("Only 10 textbox allowed");  // is clicked
            return false;
        }
        $('<div/>', {
            'id': 'TextBoxDiv' + counter
        }).html(
        $('<label/>').html('Textbox #' + counter + ' : '))
            .append($('<input type="text">').attr({
            'id': 'textbox' + counter,
            'name': 'textbox' + counter
            })) // It is safer to always use semicolons. You should put one here.

如果你仔细看，你会注意到匿名函数作为参数传递给 jQuery 的“click”方法。click 方法添加了一个函数，该函数将在当前选定元素（即button#addButton）的点击事件被触发时（即，当有人点击该元素时）执行。

于 2013-09-22T10:59:14.403 回答