Question

我正在使用Twitter Bootstrap和Codeigniter。我也在使用模板系统。

在标题视图中，我加载了jquery.min.js和bootstrap.min.js，找到路径，因为我可以点击并查看代码，当我查看源代码时。

在我的控制器中，我有以下内容来生成视图：

$this->template->set_partial('header', 'layouts/admin_header');
$this->template->set_partial('footer', 'layouts/admin_footer');
$this->template->set_partial('sidebar', 'layouts/admin_sidebar');
$this->template->build('admin/category/order', $this->data);

在标题布局视图中，我有：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="<?=base_url();?>assets/admin/js/bootstrap.min.js"></script>

现在，在order.php视图中，如果我只有以下内容，则该按钮不起作用：

<script type="text/javascript"> 

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

</script>

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button>

如果我将视图更改为this，它确实有效（唯一改变的是我将头文件中的bootstrap.min.js重复到jQuery上方的实际视图中）：

<script src="<?=base_url();?>assets/admin/js/bootstrap.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

</script>

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button>

如果我在生成整个页面后查看源代码，则会在头文件中找到两次bootstrap.min.js，并再次在按钮jQuery上方找到它。

我可以将其他jQuery放入此页面，它的工作原理非常好。它只是Twitter Bootstrap javascript存在问题。

这让我绝对疯狂，有谁知道为什么这样做？我真的不想将bootstrap.min.js添加到每个单独的视图中......

Answer 1

我在bootstrap.min.js之后加载了jquery-ui-1.8.21.custom.min.js。显然存在一些冲突。

Answer 2

尝试声明：

<script src="<?=base_url();?>assets/admin/js/bootstrap.min.js"></script>

就在之前（在同一个文件中，因为你使用的是codeigniter模板，所以不要把它放在head标签中）

<script type="text/javascript"> 

    $(document).ready(function(){
        $('#button').button();

        $('#button').click(function() {
            $(this).button('loading');
        });
    });

</script>

这应该有用。

在Codeigniter的标题视图中加载时，JavaScript无法正常工作

2 个答案: