Question

我有以下HTML代码：

<div>
   <div id="a"></div>
</div>

当id =＆＃34; a＆＃34;单击，我想用以下div替换此div：

<div id="b"></div>

我成功创造了以下小提琴：http://jsfiddle.net/ucant5uy/ 在这个小提琴中，你可以看到第一个函数（#a被点击）运行完美，但是第二个函数（#b被点击）不会运行，因为当#b不存在时div #b不存在页面已加载。

然后我决定将第二个函数放在第一个函数中：http://jsfiddle.net/ucant5uy/2/。如您所见，您可以单击#a一次，＃b一次，然后代码停止工作。我希望能够按照我想要的次数单击#a和#b。我知道你可以通过一些简单的CSS技巧实现这一点（将两个div添加到HTML并使用display：none;），但我想知道是否可以使用.append（）实现相同的功能。

提前致谢！

Answer 1

您应该将函数绑定到父div（它是main），它存在于DOM中并且将存在，否则您只能将该函数分配给已存在于DOM中的元素。

＆＃13;

$(document).ready(function() {
        $('#main').on("click","#a",function() {
            $(this).parent().append('<div id="b"></div>');
            $(this).remove();
        })
        
        $('#main').on("click","#b",function() {
            $(this).parent().append('<div id="a"></div>');
            $(this).remove();
        })
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="a"></div>
</div>

＆＃13;

Answer 2

将.on（）用于将来的元素事件处理程序

$("div").on('click','div#b',function() {

        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })

<强>演示：

$(document).ready(function() {
     $("div").on('click','div#a',function() {
        $(this).parent().append('<div id="b"></div>');
        $(this).remove();
    })
    
    $("div").on('click','div#b',function() {
       
        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })
});

div {
    width:200px;
    height:200px;
    background:red;
}

#a, #b {
    width:100px;
    height:100px;
}

#a {
    background-color:green;
}

#b {
    background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div id="a"></div>
</div>

在.append之后运行函数

2 个答案: