Question

在我的下面的ajax中，我会产生2个分页结果。

当我因某种原因点击分页链接时，会触发我的画布菜单打开。

问题：我怎样才能确保只有在点击课程时才会这样做 .navbar-brand会打开画布吗？

<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');

menuToggle.click(function() {
     closeMenu(menuToggleIcon, offCanvas);
});

content.click(function() {
    closeMenu(menuToggleIcon, offCanvas);
});

function closeMenu(menuToggleIcon, offCanvas) {
    menuToggleIcon.toggleClass('fa-indent fa-outdent');
    offCanvas.toggleClass('open');
}

}); 
</script>

<script type="text/javascript">
$(document).ready(function() {
    function load_questions_data(page){
        $.ajax({
        url:"<?php echo base_url(); ?>dashboard/questions_pagination/" + page,
        method:"GET",
        dataType:"json",
        success:function(data) {
            $('#questions_table').html(data.questions_table);
            $('#question_pagination_link').html(data.pagination1_link);
        }
        });
    }

    load_questions_data(1);

    $(document).on("click", ".question-pag li a", function(event){
        event.preventDefault();
        var page = $(this).data("ci-pagination-page");
        load_questions_data(page);
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    function load_users_data(page){
        $.ajax({
        url:"<?php echo base_url(); ?>dashboard/users_pagination/" + page,
        method:"GET",
        dataType:"json",
        success:function(data) {
            $('#users_table').html(data.users_table);
            $('#user_pagination_link').html(data.pagination2_link);
        }
        });
    }

    load_users_data(1);

    $(document).on("click", ".user-pag li a", function(event){
        event.preventDefault();
        var page = $(this).data("ci-pagination-page");
        load_users_data(page);
    });

});
</script>

控制器

<?php

class Dashboard extends MY_Controller {

    public $data = array();

    public function __construct() {
        parent::__construct();
        $this->load->model('user/user_model');
        $this->load->model('forum/question_model');
        $this->load->library('pagination');
    }

    public function index() {       
        $this->data['title'] = 'Dashboard';
        $this->data['is_logged'] = $this->session->userdata('is_logged');

        $this->data['navbar'] = $this->load->view('common/navbar', $this->data, TRUE);

        $this->load->view('common/header', $this->data);
        $this->load->view('common/dashboard', $this->data);
        $this->load->view('common/footer', $this->data);
    }

    public function users_pagination() {
        $config = array();
        $config["base_url"] = "#";
        $config["total_rows"] = $this->user_model->total_users();
        $config["per_page"] = 2;
        $config["uri_segment"] = 3;
        $config["use_page_numbers"] = TRUE;
        $config["num_links"] = 1;

        $config["full_tag_open"] = '<ul class="pagination user-pag">';
        $config["full_tag_close"] = '</ul>';
        $config["first_tag_open"] = '<li>';
        $config["first_tag_close"] = '</li>';
        $config["last_tag_open"] = '<li>';
        $config["last_tag_close"] = '</li>';
        $config['next_link'] = '&gt;';
        $config["next_tag_open"] = '<li>';
        $config["next_tag_close"] = '</li>';
        $config["prev_link"] = "&lt;";
        $config["prev_tag_open"] = "<li>";
        $config["prev_tag_close"] = "</li>";
        $config["cur_tag_open"] = "<li class='active'><a href='#'>";
        $config["cur_tag_close"] = "</a></li>";
        $config["num_tag_open"] = "<li>";
        $config["num_tag_close"] = "</li>";

        $this->pagination->initialize($config);
        $page = $this->uri->segment(3);

        $start = ($page - 1) * $config["per_page"];

        $output = array(
           'pagination2_link'  => $this->pagination->create_links(),
           'users_table'   => $this->user_model->get_ajax_users($config["per_page"], $start)
        );

        echo json_encode($output);
    }

    public function questions_pagination() {
        $config = array();
        $config["base_url"] = "#";
        $config["total_rows"] = $this->question_model->total_questions();
        $config["per_page"] = 2;
        $config["uri_segment"] = 3;
        $config["use_page_numbers"] = TRUE;
        $config["num_links"] = 1;

        $config["full_tag_open"] = '<ul class="pagination question-pag">';
        $config["full_tag_close"] = '</ul>';
        $config["first_tag_open"] = '<li>';
        $config["first_tag_close"] = '</li>';
        $config["last_tag_open"] = '<li>';
        $config["last_tag_close"] = '</li>';
        $config['next_link'] = '&gt;';
        $config["next_tag_open"] = '<li>';
        $config["next_tag_close"] = '</li>';
        $config["prev_link"] = "&lt;";
        $config["prev_tag_open"] = "<li>";
        $config["prev_tag_close"] = "</li>";
        $config["cur_tag_open"] = "<li class='active'><a href='#'>";
        $config["cur_tag_close"] = "</a></li>";
        $config["num_tag_open"] = "<li>";
        $config["num_tag_close"] = "</li>";

        $this->pagination->initialize($config);
        $page = $this->uri->segment(3);

        $start = ($page - 1) * $config["per_page"];

        $output = array(
           'pagination1_link'  => $this->pagination->create_links(),
           'questions_table'   => $this->question_model->get_ajax_questions($config["per_page"], $start)
        );

        echo json_encode($output);
    }
}

完整视图

<!-- No Data is currently set inside offcanvas -->
<div class="offcanvas"></div>

<div class="wrap">
    <?php echo $navbar;?>

    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-lg-12">
                <div class="page-header">
                <h2>Dashboard</h2>
                </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content">

                <div class="row">
                <div class="col-lg-12">
                <div class="panel panel-default">
                <div class="panel-body">
                <div id="questions_table"></div>
                <div id="question_pagination_link"></div>
                </div>
                </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                <div class="panel panel-default">
                <div class="panel-body">
                <div id="users_table"></div>
                <div id="user_pagination_link"></div>
                </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    function load_questions_data(page){
        $.ajax({
        url:"<?php echo base_url(); ?>dashboard/questions_pagination/" + page,
        method:"GET",
        dataType:"json",
        success:function(data) {
            $('#questions_table').html(data.questions_table);
            $('#question_pagination_link').html(data.pagination1_link);
        }
        });
    }

    load_questions_data(1);

    $(document).on("click", ".question-pag li a", function(event){
        event.preventDefault();
        var page = $(this).data("ci-pagination-page");
        load_questions_data(page);
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    function load_users_data(page){
        $.ajax({
        url:"<?php echo base_url(); ?>dashboard/users_pagination/" + page,
        method:"GET",
        dataType:"json",
        success:function(data) {
            $('#users_table').html(data.users_table);
            $('#user_pagination_link').html(data.pagination2_link);
        }
        });
    }

    load_users_data(1);

    $(document).on("click", ".user-pag li a", function(event){
        event.preventDefault();
        var page = $(this).data("ci-pagination-page");
        load_users_data(page);
    });

});
</script>

<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');

menuToggle.click(function() {
     closeMenu(menuToggleIcon, offCanvas);
});

content.click(function() {
    closeMenu(menuToggleIcon, offCanvas);
});

function closeMenu(menuToggleIcon, offCanvas) {
    menuToggleIcon.toggleClass('fa-indent fa-outdent');
    offCanvas.toggleClass('open');
}

}); 
</script>

Answer 1

点击像

这样的分页链接时，您需要使用event.stopPropagation()

$(document).on("click", ".question-pag li a", function(event){
    event.preventDefault();
    event.stopPropagation(); // it will prevent your content click function
    var page = $(this).data("ci-pagination-page");
    load_questions_data(page);
});

并且，对于用户数据

$(document).on("click", ".user-pag li a", function(event){
    event.preventDefault();
    event.stopPropagation(); // it will prevent your content click function
    var page = $(this).data("ci-pagination-page");
    load_users_data(page);
});

Answer 2

感谢@Rohan Kumar获得分页链接部分的答案

我已解决了问题主要问题是在非画布脚本中

新代码

<script type="text/javascript">
$(document).ready(function() {

var menuToggleIcon = $('.navbar-brand').find('.fa');

$('.navbar-brand').on('click', function() {
    menuToggleIcon.toggleClass('fa-indent fa-outdent');
    $('.offcanvas').toggleClass('open');
});

}); 

</script>

旧脚本

<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');

menuToggle.click(function() {
     closeMenu(menuToggleIcon, offCanvas);
});

content.click(function() {
    closeMenu(menuToggleIcon, offCanvas);
});

function closeMenu(menuToggleIcon, offCanvas) {
    menuToggleIcon.toggleClass('fa-indent fa-outdent');
    offCanvas.toggleClass('open');
}

}); 
</script>

Codeigniter Ajax分页链接触发画外打开

2 个答案: