javascript - 根据使用 jQuery 动态生成的 html 动态添加 html

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

您的 HTML 语法中有一些重复的 ID(例如 #row-fieldset)

如果您检查您的 HTML 代码，您会使用行字段集 id 初始化一个 fieldset 标签

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

然后您创建一个具有相同 id 的新

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

所以当 JQuery 试图找到正确的 id 时，只找到第一个。

我在 Add subrows 按钮中添加了一个用于定位正确行的值

另外你没有提供任何jQuery版本所以我用的是2.2.0

检查这个fiddle看它运行

希望对你有帮助