从局部视图内部修改主视图

modifying main view from inside partial view

本文关键字：修改 主视图 内部 视图 局部      更新时间：2023-09-26

我有一个主要观点，假设有以下内容：

<div id='test'>Some Text</div>
<div id='placeholder'></div>

然后使用 ajax，我将"占位符"的内容替换为如下所示的部分视图：

<div id='ajaxContent'>
 // new content
</div>
<script>
 $(document).ready(function() {
  console.log($('#test').text());
  $('#test').css('color','red');
 });
</script>

所以在我的脚本中，我试图将div"test"中的文本颜色更改为红色，但我在控制台中一直得到"未定义"。如何通过 ajax 从进入主视图的部分视图访问主视图中的测试div？

如果它们最终在同一页面上，html元素不应该能够看到彼此吗？

你的 JavaScript 片段只是在调用html(...)被 jQuery 删除。类似的问题可以在这里找到：jQuery .load（）/.ajax（） 在附加后没有在返回的 HTML 中执行 javascript

因此，您必须以这种方式插入部分数据（假设您在变量中result部分响应）：

$(result).find('#ajaxContent').appendTo('#placeholder');
$(result).find('script').appendTo('#placeholder');

另外，正如@RolandBertolom之前所说，在 JavaScript 中的部分响应中不需要 ready（）。

您实际上不需要使用 $(document).ready .只是没用。但它不应该破坏任何东西。以及您可以从插入同一文档中任何位置的脚本访问页面上的任何元素。所以问题超出了你的问题范围。

尝试：

  1. 从控制台运行$('#test').text()。
  2. 将$('#test').text()替换为脚本中的$('body')或其他内容。
  3. 。

调试时要演绎！ ;-）

您不应该再次使用$(document).ready，因为您的文档已经加载了主页，因此再次使用它无济于事。尝试如下：假设这是您的测试.php：

<script>
jQuery(document).ready(function() {
     $.ajax({
            type:'post',
             url:'submit.php',
             success:function(data) {
                 $('#placeholder').append(data);
             }
     });
    });
</script>

        <div id='test'>Some Text</div>
    <div id='placeholder'></div>
/

/这是您的提交.php要替换的内容

<?php
echo "<div id='ajaxContent'>
</div>
<script>
$(function(){
    console.log($('#test').text());
    $('#test').css('color','red');
});
</script>";
 ?>

注意：我在这里的确切意思是使用：

 $(function(){
        console.log($('#test').text());
        $('#test').css('color','red');
    });

在脚本中。

相关文章：