jquery 动态增加多个input 输入框

原创

mob649e815e258d 2024-01-31 08:51:47 ©著作权

文章标签 输入框点击事件 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815e258d的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 动态增加多个input输入框

在网页开发中，有时我们需要动态地增加多个输入框，以满足用户的需求。jQuery是一款流行的JavaScript库，它提供了简单、快捷的操作DOM的方法，可以很方便地实现动态增加多个输入框的功能。

动态增加单个输入框

首先，我们来看一下如何使用jQuery动态增加一个输入框。我们可以使用append()方法向指定的父元素中添加新的元素。

// 创建一个按钮元素
var addButton = $('<button>Add Input</button>');

// 创建一个文本输入框
var input = $('<input type="text">');

// 给按钮绑定点击事件
addButton.click(function() {
  // 在父元素中追加输入框
  $(this).parent().append(input.clone());
});

// 将按钮添加到body中
$('body').append(addButton);

上面的代码中，我们首先创建了一个按钮元素addButton和一个文本输入框input。然后，通过调用click()函数，给按钮绑定了一个点击事件。在点击事件中，我们使用append()方法将一个克隆的输入框添加到按钮的父元素中。

这样，每次点击按钮，就会动态地增加一个输入框。

动态增加多个输入框

接下来，我们进一步扩展上面的代码，实现动态增加多个输入框的功能。

// 创建一个按钮元素
var addButton = $('<button>Add Input</button>');

// 创建一个包含输入框的容器
var container = $('<div></div>');

// 给按钮绑定点击事件
addButton.click(function() {
  // 创建一个新的输入框
  var input = $('<input type="text">');
  // 在容器中追加输入框
  container.append(input);
});

// 将按钮和容器添加到body中
$('body').append(addButton);
$('body').append(container);

上面的代码中，我们首先创建了一个按钮元素addButton和一个容器元素container。然后，通过调用click()函数，给按钮绑定了一个点击事件。在点击事件中，我们创建了一个新的输入框，并将其追加到容器中。

这样，每次点击按钮，就会在容器中动态地增加一个输入框。

动态增加多个输入框的状态图

下面是一个使用mermaid语法绘制的状态图，描述了动态增加多个输入框的过程。

stateDiagram
  [*] --> Start
  Start --> AddButtonClicked: 点击按钮
  AddButtonClicked --> AddInput: 创建新的输入框
  AddInput --> Container: 将输入框添加到容器
  Container --> AddButtonClicked: 返回等待下一次点击