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

Question

我有一个主要观点，可以说有以下几点：

<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“测试”中的文本颜色更改为红色，但是在控制台中，我一直保持“未定义”状态。 如何从通过Ajax进入主视图的局部视图访问主视图中的test div？

如果它们最终出现在同一页面上，则html元素不应该能够互相看到吗？

Answer 1

您的JavaScript片段只是由jQuery在html(...)调用上删除的。 在此处可以找到类似的问题： 追加后，jQuery .load（）/ .ajax（）在返回的HTML中不执行javascript

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

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

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

Answer 2

您实际上不需要使用$(document).ready 。 没用 但这不应该破坏任何东西。 您还可以通过插入到同一文档中任意位置的脚本访问页面上的任何元素。 因此问题超出了您的问题范围。

尝试：

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

调试时要演绎！ ;-)

Answer 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');
    }); 

在脚本中。