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

I know My question Title is not perfectly describe my question extremely sorry about that. I don't know how to tell this as a summery. anyway this is my question.

我知道我的问题标题并不完美描述我的问题非常抱歉。我不知道如何把它作为一个总结。无论如何这是我的问题。

I am making a admin panel to change some of the content in my web page. this scenario is for change slideshow images.

我正在创建一个管理面板来更改我的网页中的一些内容。此方案用于更改幻灯片图像。

ok then after someone logged into my page I am loading three pages. like this.

好吧,然后有人登录我的页面后,我正在加载三页。像这样。

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

all the page contents I have mentioned below. so basic path is like this. once someone logged he can click the button [slide manage] to load the images and details of already inserted slides. these are getting from a database. so once he clicked the menu button. this jquery function is executing.

我在下面提到的所有页面内容。所以基本路径是这样的。一旦有人登录,他可以点击[幻灯片管理]按钮加载已经插入的幻灯片的图像和细节。这些来自数据库。所以一旦他点击了菜单按钮。这个jquery函数正在执行。

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

this function simply getting a html page. filled with previous slide details. this is the controller function handle the menu request.

这个函数只是获取一个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;
}

so previous jquery function is then appending this page content to a div like this.

所以以前的jquery函数然后将此页面内容附加到这样的div。

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

so inside this page content I have a buttons call edit for each slide already inserted. so by clicking on of this button I can edit that slide image or some test content of it. that button is like this.

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

<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>

so by clicking this button must execute this function in the header section and this function must add a html form (in a separate page) to the #editor-form-container div as previously

所以通过单击此按钮必须在标题部分执行此函数,并且此函数必须将html表单(在单独的页面中)添加到#editor-form-container div中,如前所述

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

but the problem is once I click the edit button it couldn't find this function. so it is opening the content as a separate page

但问题是,一旦我点击编辑按钮,它就找不到这个功能。因此它将内容作为单独的页面打开

How can I make this to work? Thank you the header page contains all the css and js file links. and some jquery functions. like this.

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

    <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>

then I have load menu page. it is like this.

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

<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_and_editor_holder.php page. it is like this.

table_and_editor_holder.php页面。就是这样。

<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>

1 个解决方案

#1

Dynamically created element does not respond to direct call to events like below -

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

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

So you have to write like this

所以你必须这样写

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

Just try it out.

试一试吧。

#1