如何制作动态添加或删除按钮 - How to make dynamically add or remove button

How to make dynamically add or remove button

当我单击添加按钮时，它被更改为删除按钮。但我无法再次将删除按钮更改为添加按钮，当我单击删除时。

<head>
<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"> </script>
<script type="text/javascript" >
    $(document).ready(function()
    {
        $(".add").click(function(){
            var element = $(this);
            var I = element.attr("id");
            var info = 'id=' + I;
            $("#" + I).attr("class", "remove");
            $(".remove").text("Remove");
            return false;
        });
    });
</script>
<script type="text/javascript" >
    $(document).ready(function()
    {
        $(".remove").click(function(){
            var element = this.id;
            var I = element.attr("id");
            var info = 'id=' + I;
            $("#" + I).attr("class", "add");
            $(".add").text("add");
            return false;
        });
    });
</script>

<a class="add" id="1" href="#"> Add </a>

使用jQuery修改DOM元素时，在$（document）.ready（）中加载的任何内容都无法识别更改。您可以做的是将每个步骤封装在一个函数中，在document.ready上调用这些步骤，然后在另一个函数的末尾再次调用每个步骤：

<script type="text/javascript" >
    $(document).ready(function()
    {
        addFunction();
        removeFunction();
    });
    function addFunction(){
            $(".add").click(function(){
                var element = $(this);
                var I = element.attr("id");
                var info = 'id=' + I;
                $("#result").text(I);
                $("#" + I).attr("class", "remove");
                $(".remove").text("Remove");
                removeFunction();
                return false;
            });
    }
    function removeFunction(){
        $(".remove").click(function(){
            var element = $(this);
            var I = element.attr("id");
            var info = 'id=' + I;
            $("#result").text(I);
            $("#" + I).attr("class", "add");
            $(".add").text("add");
            addFunction();
            return false;
        });
    }
</script>

document.ready中列出了这两个函数，因此不能将事件处理程序附加到.remove类，因为它还不存在。我建议使用委托事件：

$( ".LocationOfYourButtonInTheDom" ).on( "click", "ThingBeingClicked", function() {
   //code here
});

编辑：ThingBeingClicked将是触发事件的DOM对象类型，在您的情况下，这将是一个"a"标记

您可以从jquery"on"文档中阅读更多关于事件和委派的信息。