Javascript 当通过ajax post和codeigniter加载函数加载页面内容时，一些jquery函数位于head部分，无法调用

我知道我的问题标题不是完美的描述我的问题非常抱歉。作为一个夏天，我不知道该怎么说。无论如何，这是我的问题

我正在制作一个管理面板来更改我网页中的一些内容。此场景用于更改幻灯片图像

好的，在有人登录我的页面后，我将加载三个页面。像这样

$this->load->view('admin/header');
$this->load->view('admin/menu');
$this->load->view('admin/table_and_editor_holder'); 

$('#table_container').html(data);

<div class="admin-navi">
    <div class="menu-item">
        Home
    </div>
    <div class="menu-item">
        <a href="<?php echo base_url() . 'adm_slide_manage'; ?>"> Side Manage </a>
    </div>
</div>
<div class="clearfix"></div>

我在下面提到的所有页面内容。所以基本路径是这样的。一旦有人登录，他可以点击[幻灯片管理]按钮加载已插入幻灯片的图像和详细信息。这些是从数据库中获取的。所以有一次他点击了菜单按钮。此jquery函数正在执行

$('.menu-item > a').on('click', function() {...})

此函数仅用于获取html页面。充满了以前的幻灯片细节。这是控制器处理菜单请求的功能

function slider_edit_delete() {
    $sdata['slide_imgs'] = $this->admin_basic_curd->get_all_items('sider_images');
    $slide_manager = $this->load->view('admin/slider_manager', $sdata, TRUE);
    echo $slide_manager;
}

因此，前面的jquery函数随后将此页面内容附加到一个div中，如下所示

$this->load->view('admin/header');
$this->load->view('admin/menu');
$this->load->view('admin/table_and_editor_holder'); 

$('#table_container').html(data);

<div class="admin-navi">
    <div class="menu-item">
        Home
    </div>
    <div class="menu-item">
        <a href="<?php echo base_url() . 'adm_slide_manage'; ?>"> Side Manage </a>
    </div>
</div>
<div class="clearfix"></div>

因此，在这个页面内容中，我有一个按钮，为每个已经插入的幻灯片调用编辑。所以通过点击这个按钮，我可以编辑幻灯片图像或其中的一些测试内容。那个按钮是这样的

<a class="onclick_post_by_a" href="<?php echo base_url() . 'adm_edit_this_slide/' . $sl->id; ?>">
    <button class="btn btn-info"> Edit </button>
</a>

    <script>
           $(document).ready(function() {
            $('.menu-item > a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#table_container').html(data);
                });
                return false;
            });
            $('#editor-form-container').css({
                display: "none"
            });
            function posting_url(url, pdata) {
                return $.ajax({
                    url: url,
                    data: pdata
                });
            }
            $('.onclick_post_by_a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#editor-form-container').css({
                        display: "block"
                    });
                    $('#editor-form-container').html(data);
                });
                return false;
            });

            $('.post_with_image').on('submit', (function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log("success");
                        console.log(data);
                    },
                    error: function(data) {
                        console.log("error");
                        console.log(data);
                    }
                });
            }));
        });
        </script> 
    </head>

<div class="col-lg-12">
    <div class="col-lg-2"></div>
    <div id="table_container" class="col-lg-8">
    </div>
</div>
<div id="editor-form-container" class="col-lg-6">
</div>

但问题是，一旦单击“编辑”按钮，它就找不到该函数。因此，它将内容作为单独的页面打开

我怎样才能让它工作？谢谢 标题页包含所有css和js文件链接。和一些jquery函数。像这样

<a class="onclick_post_by_a" href="<?php echo base_url() . 'adm_edit_this_slide/' . $sl->id; ?>">
    <button class="btn btn-info"> Edit </button>
</a>

    <script>
           $(document).ready(function() {
            $('.menu-item > a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#table_container').html(data);
                });
                return false;
            });
            $('#editor-form-container').css({
                display: "none"
            });
            function posting_url(url, pdata) {
                return $.ajax({
                    url: url,
                    data: pdata
                });
            }
            $('.onclick_post_by_a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#editor-form-container').css({
                        display: "block"
                    });
                    $('#editor-form-container').html(data);
                });
                return false;
            });

            $('.post_with_image').on('submit', (function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log("success");
                        console.log(data);
                    },
                    error: function(data) {
                        console.log("error");
                        console.log(data);
                    }
                });
            }));
        });
        </script> 
    </head>

<div class="col-lg-12">
    <div class="col-lg-2"></div>
    <div id="table_container" class="col-lg-8">
    </div>
</div>
<div id="editor-form-container" class="col-lg-6">
</div>

$（文档）.ready（函数（）{
$（'.菜单项>a'）。在（'单击'，函数（）上）{
var url=$（this.attr（'href'）；
var pdata=“”；
var rdata=发布url（url、pdata）；
成功（函数（数据）{
$（'#table_container'）.html（数据）；
});
返回false；
});
$（“#编辑器表单容器”）.css({
显示：“无”
});
函数发布url（url、pdata）{
返回$.ajax({
url:url，
数据：pdata
});
}
$（'.onclick_post_by_a'）。on（'click'，function（）{
var url=$（this.attr（'href'）；
var pdata=“”；
var rdata=发布url（url、pdata）；
成功（函数（数据）{
$（“#编辑器表单容器”）.css({
显示：“块”
});
$（'#编辑器表单容器'）.html（数据）；
});
返回false；
});
$（'.post_with_image'）。on（'submit'），（函数（e）{
e、 预防默认值（）；
var formData=新formData（本）；
$.ajax({
键入：“POST”，
url:$（this.attr（'action'），
数据：formData，
cache:false，
contentType:false，
processData:false，
成功：功能（数据）{
控制台日志（“成功”）；
控制台日志（数据）；
},
错误：函数（数据）{
控制台日志（“错误”）；
控制台日志（数据）；
}
});
}));
});

然后我有加载菜单页面。是这样的

$this->load->view('admin/header');
$this->load->view('admin/menu');
$this->load->view('admin/table_and_editor_holder'); 

$('#table_container').html(data);

<div class="admin-navi">
    <div class="menu-item">
        Home
    </div>
    <div class="menu-item">
        <a href="<?php echo base_url() . 'adm_slide_manage'; ?>"> Side Manage </a>
    </div>
</div>
<div class="clearfix"></div>

家

table_和_editor_holder.php页面。是这样的

<a class="onclick_post_by_a" href="<?php echo base_url() . 'adm_edit_this_slide/' . $sl->id; ?>">
    <button class="btn btn-info"> Edit </button>
</a>

    <script>
           $(document).ready(function() {
            $('.menu-item > a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#table_container').html(data);
                });
                return false;
            });
            $('#editor-form-container').css({
                display: "none"
            });
            function posting_url(url, pdata) {
                return $.ajax({
                    url: url,
                    data: pdata
                });
            }
            $('.onclick_post_by_a').on('click', function() {
                var url = $(this).attr('href');
                var pdata = "";
                var rdata = posting_url(url, pdata);
                rdata.success(function(data) {
                    $('#editor-form-container').css({
                        display: "block"
                    });
                    $('#editor-form-container').html(data);
                });
                return false;
            });

            $('.post_with_image').on('submit', (function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log("success");
                        console.log(data);
                    },
                    error: function(data) {
                        console.log("error");
                        console.log(data);
                    }
                });
            }));
        });
        </script> 
    </head>

<div class="col-lg-12">
    <div class="col-lg-2"></div>
    <div id="table_container" class="col-lg-8">
    </div>
</div>
<div id="editor-form-container" class="col-lg-6">
</div>

---

动态创建的元素不响应对以下事件的直接调用-

$('.onclick_post_by_a').on('click', function() {...})

所以你必须这样写

$(document).on('click', '.onclick_post_by_a', function() {...})

---

试一试。

这难道不可能把问题缩小一点吗？嗯。我需要做的只是在另一个html页面（a）的div标记中包含单独的php文件（B），其中包含一些动态html内容。因此，这是通过（a）页面头部的jquery函数完成的。所以，在（B）页内容中通过单击按钮完成此操作之后，我需要在（a）页的标题中执行jquery函数。但是这个函数不能执行。因为它说的是未定义的。@AfghanWiz-请检查这个问题。我让场景变得简单。对非常感谢。通过简化此场景，我创建了另一个问题。得到了同样的答案。谢谢你给我宝贵的时间