javascript - 使用 JS 复制带有 script/style 标签的 div

Question

我有以下 html 代码:

<table><tbody><tr><td>
      <div id="div_1">
          <style>...</style>
          <div><label> 1 </label></div>
          <div><input type="text" name="text_1"/></div>
          <script>$("#text_1").mask("99/99/9999");</script>   
          <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
          ...    
      </div>                    
      ...                
      <div id="div_20">
           <style>...</style>
           <div><label> 1 </label></div>
           <div><input type="text" name="text_20"/></div>
           <script>$("#text_20").mask("99/99/9999");</script>   
           <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
           ...    
      </div>
</td></tr></tbody></table>  

生成这个(实际上是从 1 到 20):

我需要的是当用户按下箭头按钮时插入一个全新的div。它应该复制带有脚本和样式的 div，并在它们后面插入一个新数字(例如 21，然后 22 等)。

Answer 1

这纯粹是执行此任务的替代方法的指导示例。故意罗嗦以提供想法。

建议:使用 jQuery 时避免使用基于属性的事件处理程序:

澄清我的第一条评论。如果您使用onclick=javascript处理程序，您将事件的注册放置在 HTML 中，与脚本中的实际处理程序分开。 “jQuery 方式”是将处理函数应用于所选元素，使用类似 .click() 的方法。和相当有用的.on()我在下面使用它。这使得维护页面变得更加容易，因为您无需在 HTML 中寻找 JavaScript 片段。 jQuery 事件处理程序还支持将同一事件的多个处理程序附加到一个元素，而使用 onclick= 根本无法做到这一点。 。

显示的概念:

• 对下一个 ID 号使用全局计数器，并在每次使用后简单地增加它
• 使用委托(delegate)事件处理程序来处理“添加”点击，因为元素是动态添加的(因此稍后才存在)。
• 使用存储在虚拟中的模板 <script> block 来保存模板 HTML(此 text/template 类型未知，因此会被所有浏览器忽略。这也使维护变得轻而易举。
• 将模板中的占位符标记替换为新的 ID 信息
• 使用 $(html) 将 HTML 转换为 DOM 元素
• 在新行中查找后代以添加类似 mask 的内容.
• 追加新行

JSFiddle: http://jsfiddle.net/TrueBlueAussie/Lu0q0na2/2/

// Declare a global counter for our new IDs
id = 2;

// Listen for click events at a non-changing ancestor element (delegated event handler)
$(document).on('click', '.addnew', function(e){

    // get the HTML of the template from the dummy script block
    var template = $('#template').html();

    // Change the template names etc based on the new id
    template = template.replace('{name}', 'name' + id).replace('{id}', id);

    // Increase next id to use
    id++;

    // Convert the HTML into a DOM tree (so we can search it easily)
    var $template= $(template);

    // Apply the mask to the newly added input - alter this to suit
    $template.find('input').mask("99/99/9999");

    // Append the new row
    $('table').append($template);

    // stop the link from moving to page top
    return false;
});

如果您有疑问，我很乐意解释其中的任何部分。我意识到与您现有的做法相比，这可能有点令人震惊:)