動態添加HTML取決於動態生成的HTML與jQuery

Question

我目前正在開發一個項目，我必須開發一個允許在數據庫中操作表的WordPress插件。我的工作是基於這個插件，我正在改進和編輯，以匹配我公司的要求：https://wordpress.org/plugins/create-db-tables/

然而，我的問題不關心MySQL，但HTML，PHP和jQuery（特別是jQuery，根本不熟悉）。它是關於動態生成一個表單的，它本身取決於一個動態生成的表單（是啊......）。

使用以下代碼，插件用戶可以動態地將行添加到他創建的表中。我希望他能夠加入「亞行」（我知道如何處理它的服務器端，在這裏我的問題是隻有接口），這樣的：

http://i.imgur.com/XHwI54W.png

用戶點擊時「添加亞行」，一個區域出現在他可以填寫表格的地方等等。它對第一行非常完美（至少是界面），但在此之後，無論何時點擊另一個「添加亞行」按鈕，都不會發生任何事情。

如果有人能花時間告訴我我做錯了什麼，我將非常感激。非常感謝 ！ :)

這裏是我的代碼： （第一jQuery腳本看似工作，我不是誰開發它的人我複製它，並努力去適應，第二個我的「分列」的規定）

<form id="create-table" method="post" action="<?php echo admin_url('admin-post.php'); ?>"> 

     <input type="hidden" name="action" value="add_table"> 

     <fieldset class="table-fieldset"> 
      <label id="table-name">Table Name:</label> <br /> 
      <span style="position: relative; top: 2px;"><?php echo "Choose prefix (by default wp_) : " ?></span><input type="text" class="prefix-name" name="prefix_name" size="4" id="prefix-name"><br /> 
      <span style="position: relative; top: 2px;"><?php echo "Choose table name :" ?></span><input type="text" class="table-name" name="table_name" size="30" id="table-name"> 
      <span>(Alphanumeric only, no special characters.)</span> <br/> <br/> 
      <span><font color="blue"><strong>Will this table be used for user authentication ? </strong></font></span><input type="checkbox" class="is-user-auth" name="is_user_auth" id="is-user-auth"><br/> 
      <span><strong>/!\ Only one table at a time can be used for user authentication : if a current table is used for this purpose, it won't be anymore.</strong></span><br/><br/> 
     </fieldset> 

     <div id="rows"> 
      <fieldset class="row-fieldset" id="row-fieldset" value="1"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id="subrows1" value="1"></div></fieldset> 
     </div> 

     <div id="add-row"> 
      <button type="button" class="add-row button-secondary">Add Row</button> 
     </div> 

     <fieldset> 
      <input type="hidden" id="items" name="items" value="1" /> 
     </fieldset> 

     <fieldset> 
      <input type="hidden" id="subrowitems" name="subrowitems" value="101" /> 
     </fieldset> 

     <fieldset> 
      <button type="submit" class="button button-primary button-large">Create Table</button> 
     </fieldset> 

    </form> 

    <!-- Script to add rows --> 
    <script> 
     jQuery(function($) { 
      $('.add-row').click(function() { 
       $('#items').val(function(i, val) { return +val+1 }); 
       var val_2=$('#items').attr('value'); 
       var subrow_name = 'subrows'+val_2; 
       var rowHTML = '<fieldset class="row-fieldset" id="row-fieldset" value=\"'+val_2+'\"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id=\"'+subrow_name+'\" value=' + val_2 + '></div></fieldset>'; 
       $('#rows').append(rowHTML); 
      }); 
      $("input.name-input").on({ 
       keydown: function(e) { 
        if (e.which === 32) 
         return false; 
       }, 
       change: function() { 
        this.value = this.value.replace(/\s/g, ""); 
       } 
      }); 
      $("input.table-name").on({ 
       keydown: function(e) { 
        if (e.which === 32) 
         return false; 
       }, 
       change: function() { 
        this.value = this.value.replace(/\s/g, ""); 
       } 
      }); 
     }); 
    </script> 

    <!-- Script to add subrows --> 
    <script> 
     jQuery(function($) { 
      $('.row-dynamic').click(function() { 
       $('#subrowitems').val(function(i, val) { return +val+1 }); 
       var val_3=$('#subrowitems').attr('value'); 
       var subrowHTML = '<fieldset class="subrow-fieldset" value=\"' +val_3+ '\"><label id="subrow-label">Subrow:</label><input type="text" class="subrow-name-input" name="name[]" placeholder="Name" size="20" style="background-color: #E3F6CE"><input type="text" class="subrow-type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20" style="background-color: #E3F6CE"><span id="subrow-null-label">Null</span><input type="checkbox" class="subrow-null-input" name="null[]" style="background-color: #E3F6CE"><input type="text" class="subrow-default-input" name="default[]" placeholder="Default Value" size="20" style="background-color: #E3F6CE"><span id="subrow-unique-label">Unique</span><input type="checkbox" class="subrow-unique-input" name="unique[]" style="background-color: #E3F6CE"></fieldset>'; 
       var subrow_val = '#subrows'+$('#row-fieldset').attr('value'); 
       $(subrow_val).append(subrowHTML); 
      }); 
      $("input.subrow-name-input").on({ 
       keydown: function(e) { 
        if (e.which === 32) 
         return false; 
       }, 
       change: function() { 
        this.value = this.value.replace(/\s/g, ""); 
       } 
      }); 
      $("input.table-name").on({ 
       keydown: function(e) { 
        if (e.which === 32) 
         return false; 
       }, 
       change: function() { 
        this.value = this.value.replace(/\s/g, ""); 
       } 
      }); 
     }); 
    </script> 

Answer 1

你有一些重複的ID在你的HTML sintax（如#row-fieldset）

如果你檢查你的HTML代碼，你初始化fieldset標籤與行字段集id

<fieldset class="row-fieldset" id="row-fieldset" value="1"> 

，以後你創建一個新的具有相同id

var rowHTML = '<fieldset class="row-fieldset" id="row-fieldset" value=\"'+val_2+'\ 

所以當JQuery的試圖找到合適的id，只能找到第一個。

我加入添加子行按鈕值找到正確的行

你也沒有提供任何jQuery的版本，所以我用2.2.0

檢查這個fiddle看到它運行

希望它有幫助