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

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

jquery html

当按下另一个div上的on按钮时，JQUERY在页面中加载div,jquery,html,reload,Jquery,Html,Reload,好的，这是我的代码 <!DOCTYPE html> <html> <head> <title>Hello!</title> <style> #add_data{ display: none; } </style> </head> <body> <button id="data">Data</button> <div id="container">

好的，这是我的代码

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


你好
#添加数据{
显示：无；
}
资料

















$（文档）.ready（函数（）{
$（“#添加新数据”）。单击（函数（）{
$（“#容器”）.fadeOut（）；
$（“#添加#u数据”）.fadeIn（）；
返回false；
});
$（“#数据”）。单击（函数（）{
$（“#容器”）.empty（）.fadeIn（）.load（“test.html”+“#content”）；
$（“#添加#数据”）.fadeOut（）；
返回false；
});
});

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

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

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

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

如何解决此问题：）

我无法测试此问题，因为您尚未进行测试，但我认为问题在于您的事件未被委派，因此当您替换元素时，事件不再附加

$(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;
    });
});

见：

根据要求，下面是我试图解释事件委派的内容：

假设您有一些元素的类为“

clickme

”

<div class='clickme'>me</div>
<div class='clickme'>and me</div>
<div class='clickme'>me too</div>

……到目前为止一切都好吗？现在，您可以删除/替换这些元素：

$(".clickme").remove();
$(body).append($("<div class='clickme'>what about me?</div>"));

“嘿

#家长

，当我单击你的

时，请检查事件目标
是否有单击我
的类。如果是，请大声喊出.Ta。”）
将“添加新数据”上移一行（在“内容”之外）并使用。加载“内容”而不是“容器”，这样您就不会删除“添加新数据”谢谢，伙计，它解决了我的问题，但您能更详细地解释一下以更好地理解它吗：）
$(".clickme").remove();
$(body).append($("<div class='clickme'>what about me?</div>"));

$("#parent").on("click", ".clickme", function(){alert("click!");});