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

【问题标题】：modifying main view from inside partial view从局部视图内部修改主视图
【发布时间】：2014-12-11 16:16:55
【问题描述】：

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

<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 元素是否应该能够相互看到？

【问题讨论】：

在将内容放入主视图的 AJAX 调用的完成或成功回调中运行脚本。
@MarcellFülöp 我不想这样做，我有我的理由，我需要在部分内部这样做
使用 document.ready() 可能是问题 - 我不确定在主文档已经准备好后添加新内容时是否会触发。您应该能够简单地包含脚本，而无需将其包装在 document.ready() 中。
好吧，估计不是这样。您肯定没有其他 ID 为“test”的元素吗？您发布的片段当然看起来应该可以工作。

标签： javascript jquery ajax

【解决方案1】：

jQuery 在html(...) 调用上简单地删除了您的 JavaScript 片段。可以在这里找到类似的问题：jQuery .load() / .ajax() not executing javascript in returned HTML after appended

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

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

另外，正如@RolandBertorom 之前所说，您不需要在 JavaScript 的部分响应中使用 ready()。

【讨论】：

【解决方案2】：

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

试试：

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

调试时进行演绎！ ;-)

【讨论】：

【解决方案3】：

你不应该再次使用$(document).ready，因为你的文档已经加载了主页，所以再次使用它不会有帮助。试试这样：假设这是你的 test.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>

//这是你submit.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');
    });

在脚本中。

【讨论】：