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

【问题标题】：JQUERY load div in page when pressing on button on another div按下另一个div上的按钮时，JQUERY在页面中加载div
【发布时间】：2014-06-07 19:32:43
【问题描述】：

好的，这是我的代码

<!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，但是当我这样做时，我不能使用任何其他按钮

如何解决这个问题:)

【问题讨论】：

标签： jquery html reload

【解决方案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，我们给任务对父元素说“当我点击你时，请检查我是否点击你的这个特定的孩子”。例如：
$("#parent").on("click", ".clickme", function(){alert("click!");});
“嘿#parent，当我click你时，请检查event target是否有clickme的类。如果有，请大声喊叫。Ta。”;)

【讨论】：

谢谢哥们，它解决了我的问题，但是你能不能详细解释一下，以便更好地理解它:)

【解决方案2】：

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

【讨论】：