Codeigniter Ajax分頁鏈接觸發非帆布打開

Question

在我的ajax下面，我生成了2個分頁結果。

當我點擊分頁鏈接出於某種原因，它會觸發我的畫布菜單打開。

問：我怎樣才能確保只有當我點擊類 .navbar品牌將打開關閉印刷品嗎？

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