Question

我在查找如何在点击事件中向父对象添加元素时遇到了一些麻烦。

我希望实现的结果是：

<ul>
        <li><button>B1</button>
            <ul class="newul">
                <li><button>B1.1</button>
                    <ul class="newul">
                        <li><button>1.1.1</button></li>
                        <li><button>1.1.2</button></li>
                    </ul>
                </li>
                <li><button>B1.1</button></li>
            </ul>
        </li>
        <li><button>B2</button></li>
        <li><button>B3</button></li>
</ul>

假设我点击按钮B2。我希望将新的UL添加到该按钮的父LI，然后能够将新的LI元素添加到新创建的UL中。我希望这是有道理的！

所以基本上，点击按钮，将新的UL与“newul”类添加到您当前所在的LI中 - ＆gt;将新LI添加到新创建的UL。

我目前使用的jquery如下：

$('button').click(function(){
    //Get parent..
        var parent = $(this).parent();
        //Add a new UL to the parent and save it as newul           
        var newul = parent.add("ul");
                    //Add the class to the new UL
        newul.addClass('newul');               
        //Add a new li to the new UL            
            newli = newul.add('li');
            //Add a button to the new LI
            newli.append('<button></button>');

});

不幸的是，这会产生完全不受欢迎的效果，并且会在整个地方粘贴按钮。我很感激您提供的任何帮助。

这是我所追求的一个可见的例子。顶部是效果id就像要实现。

Example of desired result

Answer 1

即使@am not i am has the correct code。没有解释你的代码失败的原因，我认为这就是你要求的答案。

您的代码中存在几个问题：

第一

//Add a new UL to the parent and save it as newul           
var newul = parent.add("ul");

'ul'是一个选择器，因此将在DOM中搜索其他<ul>元素，而不是创建一个新元素。此外，parent.add()方法返回parent对象，而不是您选择的ul。

正确的代码：

//Add a new UL to the parent and save it as newul           
var newul = $("<ul>").appendTo(parent);

第二

//Add a new li to the new UL            
newli = newul.add('li');

同样的问题，因为newul实际上仍然是parent，所以你得到了所有类型的疯狂。此外，你错过了var，但也许我没有得到你的关闭。

正确的代码：

//Add a new li to the new UL         
var newli = $("<li>").appendTo(newul);

这就是全部。如果您在代码中修复它，它将起作用。

但是，除非你真的需要这些引用继续存在，否则如果你将整个事物作为字符串传递通常会获得更好的性能：

$('button').click( function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button></li></ul>')
    );
});

修改

如果您希望所有新按钮具有相同的功能，请使用on() method和按钮类：

$('body').on('click', 'button.ul-appending', function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button class="ul-appending"></li></ul>')
    );
});

您可以将'body'选择器更改为更具体的内容，以便在页面上的每次点击时都不会查询。只需确保将类ul-appending添加到此处理程序未生成的所有现有按钮中。

JSFiddle

Answer 2

我在这里看到的一个问题是创建的新按钮不会将click事件绑定到它们。我通过使用on并将事件设置为委托来解决此问题。在这样做时，我给ul外id container ul。我还会检查以确保您尚未添加li元素，如果它不在$('#container').on("click", "button.newbtn", function(){ var parent = $(this).closest('li'); var childUl = parent.children('ul'); if(childUl.length === 0) { parent.append("<ul class='newul'></ul>"); childUl = parent.children('ul'); } childUl.append($("<li><button class='newbtn'>" + $(this).html() + "." + (childUl.children().length + 1) + "</button></li>")); });内，则附加一个元素。 Here is a working example

{{1}}

Answer 3

$('button').click(function(){
         //Get parent..
        var parent = $(this).parent();

        //Add a new UL to the parent and save it as newul           
        var newul = $("<ul/>");

        //Add the class to the new UL
        newul.addClass('newul');               

        //Add a new li to the new UL            
        var newli = $('<li/>');

        //Add a button to the new LI
        newli.append('<button></button>');

        // add ul to parent li
        parent.append( newul.append( newli ) );

});

Answer 4

此处的问题是您使用的是.add()而不是.after()。

.add()将传递的元素添加到当前选择中。 .after()在当前选择之后添加传递的元素。

使用.after()，我们可以将您的脚本简化为一个漂亮的小单行：

$('button').click(function(){
    $(this).after('<ul class="newul"><li><button></button></li></ul>');
});

由于.after()在当前元素旁边插入内容，因此无需获取.parent()。 .after()可以使用完整的HTML字符串，因此不需要使用jQuery来操作类并添加子元素。

<强> Example.

Answer 5

使用.on函数动态添加元素。

你可以使用这样的东西。

$(document).ready(function(){
    i = 1;
    $('body').on("click","button",function(event){
        $(this).after('<ul class="newul"><li><button>TestButton'+i+'</button></li></ul>');
        i++;
    });
});

这是DEMO。根据您的css和按钮值调整按钮。

jQuery向父级添加元素

5 个答案:

修改

JSFiddle