Question

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

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

<div id='placeholder'></div>

然后使用ajax我用部分视图替换'placeholder'的内容，如下所示：

<div id='ajaxContent'>
 // new content
</div>

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

所以在我的脚本中我试图将div'test'中的文本颜色更改为红色，但我在控制台中一直“未定义”。如何从主视图中通过ajax？

访问主视图中的测试div

如果他们最终在同一页面上，那么html元素是否应该能够看到对方？

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

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

Answer 2

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

尝试：

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

调试时要演绎！ ; - ）

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

在剧本中。

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

3 个答案: