Question

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

<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>

Answer 1

使用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>

Answer 2

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

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

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

您可以从jquery "on" documentation了解有关事件和授权的更多信息。

如何动态添加或删除按钮

2 个答案: