Question

好的，这是我的代码

<!DOCTYPE html>
<html>
<head>
  <title>Hello!</title>
<style>
#add_data{
display: none;
}
</style>
</head>
<body>
<button id="data">Data</button>
<div id="container">
    <div id="content">
    <a href="#" id="add_new_data">Add New Data</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>
</div>
<div id="add_data">
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="submit" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add_new_data").click(function(){
    $("#container").fadeOut();
    $("#add_data").fadeIn();
    return false;
});
$("#data").click(function(){
    $("#container").empty().fadeIn().load("test.html" + " #content");
    $("#add_data").fadeOut();
    return false;
});
});
</script>
</body>
</html>

现在尝试按“添加新数据”按钮，它将淡出我的数据并显示表单输入

现在按数据按钮加载数据并淡出表单输入

最后按“添加新数据”按钮，这是我的问题

我想在按下数据按钮时重新加载我的div但是当我这样做时，我不能使用任何其他按钮

如何解决这个问题：）

Answer 1

我无法对此进行测试，因为您尚未设置jsFiddle，但我认为问题是因为您的事件未被委派，因此当您更换元素时，不再附加事件。

$(document).ready(function(){
    $("body").on("click", "#add_new_data", function(){
        $("#container").fadeOut();
        $("#add_data").fadeIn();
        return false;
    });
    $("body").on("click", "#data", function(){
        $("#container").empty().fadeIn().load("test.html" + " #content");
        $("#add_data").fadeOut();
        return false;
    });
});

请参阅：http://learn.jquery.com/events/event-delegation/

根据要求，这是我尝试解释事件委派：

想象一下，你有一些带有'clickme'......
类的元素
<div class='clickme'>me</div>
<div class='clickme'>and me</div>
<div class='clickme'>me too</div>
...您附加event listener就像这样：
$(".clickme").click(function(){alert("click!");});
......到目前为止一切都好吗？现在你删除/替换这些元素：
$(".clickme").remove();
$(body).append($("<div class='clickme'>what about me?</div>"));
删除元素时，也会删除事件侦听器（为什么   听一个不再存在的元素上的事件？）所以   虽然你的新元素有正确的类，但它并不存在   应用事件监听器的时间。

那么我们如何将一个事件监听器应用于尚未发生的元素   存在？我们将它“委托”给负责任的父母。 IE，我们给出了任务   到一个父元素并说“当我点击你，请检查我是否   点击你的这个特殊孩子“.EG：
$("#parent").on("click", ".clickme", function(){alert("click!");});
“嘿#parent，当我click时，请检查event target是否有clickme类。如果是，请大声喊叫.Ta。 “;）

Answer 2

向上移动添加新数据（在#content之外）并在#content而不是#container上使用.load，这样就不会删除#add_new_data

按下另一个div上的按钮时，JQUERY在页面中加载div

2 个答案: