用 jQuery 替换 div 与相同的 div onclick答案

【问题标题】：Replace div with same div onclick with jQuery用 jQuery 替换 div 与相同的 div onclick
【发布时间】：2013-07-18 21:40:45
【问题描述】：

我想在按钮上用 jQuery onclick 替换 div 容器，但我不知道该怎么做。我试过这个：

jQuery(document).click(function() {
("#dynamic").load("single.php #partial_index");
});

但是我该如何替换它呢？现在如果我点击它就不会显示（它什么也不做），但我想这是正常的，因为我没有声明替换 div。有什么改变我可以完成这项工作吗？

如果我点击动态按钮，我想用一个名为 test 的 ID 替换一个 div。我希望它被 single.php #partial_index 替换。该按钮现在什么都不做。

【问题讨论】：

标签： jquery replace onclick refresh reload

【解决方案1】：

首先，始终确保您的主代码位于 DOM 就绪结构内，如下所示：

jQuery(document).ready(function() {
    // This fires when the DOM has loaded (thus all your link(stylesheet) and script includes at the very least
});

在您的函数中，我看到您使用 ('#dynamic')，但它缺少 $ jQuery 全局或 jQuery 命名空间本身，请像这样使用它：

jQuery('#dynamic');

或者

$('#dynamic');

接下来，您有一个想要用来替换 div 内容的按钮？

$('button').click(function() {
    $('#dynamic').load('single.php#partial_index');
});

您还可以用新元素替换您的内容，如下所示：

$('#dynamic').replaceWith($('<div>I am a new jQuery dynamic element!</div>'));

【讨论】：

感谢您的回答，我试过这个：<script> jQuery(document).ready(function() { jQuery('button').click(function() { jQuery('#dynamic').replaceWith(jQuery('<div>I am a new jQuery dynamic element!</div>')); })}); </script> 但它什么也没做？

【解决方案2】：

此代码现在所做的是将单击处理程序绑定到文档。单击文档时，它会将single.php #partial_index 加载到#dynamic 元素中（尽管它缺少$：$('#dynamic')。

这就是我认为你想要的：

$('#dynamic').click(function() {
    $('#test').load("single.php #partial_index");
});

【讨论】：

这不是我的问题的答案。它不会取代任何东西。
以下是我理解您想要的内容的方式：“当我单击 id 为 'dynamic' 的元素时，获取 'single.php'（仅获取 id 为 'partial_index' 的元素的内容）和将该内容放入 id 为“test”的 div 中”。我理解错了吗？
我想用 partial_index 替换 test，但是你理解的方式也可以。无论如何，这只是另一个问题的一小部分。这是实际的问题：stackoverflow.com/questions/17751511/…

【解决方案3】：

未经测试，但这样的东西应该可以工作

$("#dynamic").click(function() {
    $("<div />").attr("id", "#partial_index").load("single.php #partial_index", function(data){
         var newDiv = $(this).html(data);
         $('#test').replaceWith(newDiv)  
     })
});

【讨论】：

感谢詹姆斯的回答，但也没有任何反应。

【解决方案4】：

$("#dynamic").click(function() {
   $('#test').replaceWith($('#partial_index'));
});

【讨论】：

不，上面写着missing ) after argument list </script>
我已经编辑了我的答案以关闭大括号.. 看看你是否正确关闭了大括号