Javascript 最近的，下一个，兄弟姐妹不能工作。动态造型

我有一个表单，它通过上一页的用户输入和一个按钮，允许用户定义他们想要分配给设备的属性数量

页面要求用户为每个属性定义名称和类型。如果用户从选择列表中选择了选择选项列表，则会通过jquery append add显示一个按钮，该按钮允许用户添加文本输入以添加选项。但是，使用“最近”、“下一个”和“同级”操作将不起作用。它在不使用任何这些选项的情况下工作，但是它将文本输入分配给页面上选项类的每个实例

由于某些原因，代码在fiddle中无法正常工作，因此我不得不复制并粘贴整个页面代码

<!-- Declare num variable from form on previous page -->
<?php echo "<script> var num=\"".$_POST['number-of-attributes']."\";</script>"; <script type="text/javascript>
//variable to count the number of attributes
count=0;
//Convert Php post to an int
num=parseInt(num, 10);
//This method inserts the number of attributes present in the param
function addAttribute (input) {

    for(var i=0; i<input; i++) {

        var template="<div class=\"new-attribute\">"
                 + "<h3>New Attribute</h3>"
                 + "<label for=\"attributeName"+count+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeName"+count+"\">"
                 + "<label for=\"attributeType"+count+"\">Type:</label>"
                 + "<select class=\"tattribute\" name=\"attributeType"+count+"\">"
                 + "<option value=\"text\" selected>Text</option>"
                 + "<option value=\"checkbox\">Checkbox</option>"
                 + "<option value=\"select-list\">Select Option List</option>"
                 + "<option value=\"notes\">Notes</option>"
                 + "</select>"
                 + "<div class=\"option\"></div>"
                 + "<div class=\"remove\">Delete</div>"
                 + "</div>";
            $(template).appendTo('#attributes');
            count++;
            $("input[id=count-field]").val(count);

    }           

}
//JQuery does its stuff
    $(document).ready(function() {


        //Add the required number of attributes
        if(num!=null) {

            addAttribute(num);

        }

        //Add one attribute on click
        $("#new").on('click', function() {

            addAttribute(1);
            //Remove current of clicked 
            $(".remove").on('click', function() {

                $(this).closest('.new-attribute').remove();

            });

        });

//Remove current of added
        $(".remove").on('click', function() {

            $(this).closest('.new-attribute').remove();

        });

        //select temp
        var select="<div id=\"new-option\">"
                 + "<div class=\"btn\">add</div>";   
                 + "</div>";
        var add= "<label for=\"attributeOption"+count+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeOption"+count+"\">";        
        //get value of select
        $('.tattribute').change(function() {

           //Add extra fields for select
            if (this.value == "select-list") {

                $(this).next('.option').append(select);
                $(".btn").on('click', function() {

                    $(this).next('.option').append(add);

                });


            }   
            //Remove extra fields if not a select
            else {

                    $(this).next('.option').empty();

            }

        });

    });

---

要回答您眼前的问题，一个不起作用的调用是当您尝试从.btn中查找next.option时，这是因为.btn不是.option的兄弟

现在，您在事件委派方面也有一些问题，您的jQuery代码可以这样优化：

//JQuery does its stuff
$(document).ready(function () {
    //Add the required number of attributes
    if (num != null) {
        addAttribute(num);
    }

    //Add one attribute on click
    $("#new").on('click', function () {
        addAttribute(1);
    });

    //Remove action
    $("#attributes").on('click', '.remove', function () {
        $(this).closest('.new-attribute').remove();
    });

    //select temp
    var select = "<div id=\"new-option\">" + "<button type=\"button\" class=\"btn\">add</button>"; + "</div>";
    var add = "<label for=\"attributeOption" + count + "\">Name:</label>" + "<input class=\"attribute\" type=\"text\" name=\"attributeOption" + count + "\">";

    //Select change action
    $('#attributes').on('change', '.tattribute', function () {
        //Add extra fields for select
        if (this.value == "select-list") {
            $(this).next('.option').append(select);
        }
        //Remove extra fields if not a select
        else {
            $(this).next('.option').empty();
        }
    });
    //Add action
    $("#attributes").on('click', '.btn', function () {
        $(this).before(add); //adjust this since I don't know exactly where you want to insert the new inputs
    });
});

检查这个

---

请注意，对于新建、添加和删除按钮，我使用了正确的标记而不是div。

发布呈现的HTML，而不是PHP。唯一与js相关的PHP只是打印出任意数字。所以num=任意一个空的数字。现在请发布呈现的HTML，因为PHP在这里是不相关的。这没有什么区别。但这里有一个链接到实时代码。。。填写第一页上的两个字段，它将带您进入我遇到问题的页面。

<form id="form" name="new-user" action="update.php" method="post">

    <label for="device-name">Name of Device Type:</label>
    <?php echo $_POST['device-name']; ?>


    <div id="new">New Attribute</div>

    <div id="attributes">

    </div>

    <input id="count-field" class="hidden-field" type="hidden" name="total" value="">
    <input class="hidden-field" type="hidden" name="device-name" value="<?php echo $_POST['device-name']; ?>">

    <input class="submit-button" type="Submit" value="Submit">

</form>

//JQuery does its stuff
$(document).ready(function () {
    //Add the required number of attributes
    if (num != null) {
        addAttribute(num);
    }

    //Add one attribute on click
    $("#new").on('click', function () {
        addAttribute(1);
    });

    //Remove action
    $("#attributes").on('click', '.remove', function () {
        $(this).closest('.new-attribute').remove();
    });

    //select temp
    var select = "<div id=\"new-option\">" + "<button type=\"button\" class=\"btn\">add</button>"; + "</div>";
    var add = "<label for=\"attributeOption" + count + "\">Name:</label>" + "<input class=\"attribute\" type=\"text\" name=\"attributeOption" + count + "\">";

    //Select change action
    $('#attributes').on('change', '.tattribute', function () {
        //Add extra fields for select
        if (this.value == "select-list") {
            $(this).next('.option').append(select);
        }
        //Remove extra fields if not a select
        else {
            $(this).next('.option').empty();
        }
    });
    //Add action
    $("#attributes").on('click', '.btn', function () {
        $(this).before(add); //adjust this since I don't know exactly where you want to insert the new inputs
    });
});