点击提交按钮动态添加带弹窗功能的锚点标签实现需求

需求说明 #

点击提交按钮后，在指定<div>中动态生成一个<a>标签，该标签的href属性和点击弹窗的链接需携带输入框中的参数，点击标签可弹窗打开目标链接。

原代码存在的问题 #

1. JS选择器语法错误：$"div#idSection") 缺少左括号，正确写法是$("#idSection")
2. 参数拼接逻辑错误：没有正确获取输入框的值并插入到URL中
3. onclick事件写法错误：window.open('href=http://localhost/request+...') 无需额外添加href=，直接传入目标URL即可
4. 字符串转义冗余：原代码中的HTML实体（如<）可直接使用正常标签语法

修正后的完整代码 #

HTML部分

<div align="center" id="idSection">
  <input type="text" id="first" placeholder="输入ID..." maxlength="11" />
  <input type="button" id="submit" value="提交" />
</div>

JS部分（基于jQuery）

// 绑定提交按钮点击事件
$("#submit").click(function() {
  // 获取输入框的参数值并去除首尾空格
  const inputValue = $("#first").val().trim();
  
  // 非空校验，避免生成无效链接
  if (!inputValue) {
    alert("请输入有效ID");
    return;
  }
  
  // 构造带参数的目标URL
  const targetUrl = `http://localhost/request/${inputValue}`;
  
  // 创建<a>标签，这里推荐用target="_blank"实现弹窗，更符合HTML规范
  const reportLink = $(`<a href="${targetUrl}" target="_blank" style="margin-left: 10px;">REPORT</a>`);
  
  // 若一定要使用onclick事件触发window.open，可替换为下面的写法：
  // const reportLink = $(`<a href="${targetUrl}" onclick="window.open('${targetUrl}', '_blank')" style="margin-left: 10px;">REPORT</a>`);
  
  // 可选：如果需要每次提交只保留最新的链接，先移除已存在的标签
  $("#idSection a").remove();
  
  // 将生成的链接添加到指定div中
  $("#idSection").append(reportLink);
});

关键说明 #

• 增加了输入框非空校验，避免生成无意义的无效链接
• 使用ES6模板字符串拼接URL，语法更简洁，不易出错
• 优先推荐target="_blank"实现弹窗跳转，这是HTML的标准属性，比onclick事件更简洁可靠
• 加入了可选的重复链接移除逻辑，避免多次提交后生成大量重复标签

内容的提问来源于stack exchange，提问作者Swetha