joomla bootstrap jquery麻烦答案

【问题标题】：joomla bootstrap jquery troublejoomla bootstrap jquery麻烦
【发布时间】：2014-10-23 17:15:50
【问题描述】：

我有一个使用 joomla 和 bootstrap 的网站。当我尝试使用 JHtml::_('jquery.framework'); 加载 jquery 时在模板中的文件 index.php 中并在文章中使用 jquery 时，会出现错误。

在 joomla 文章中：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Evenementen</title>
</head>
<body>
<div class="inleidingevenement">
<H2> INSCHRIJVEN VOOR DE EVENEMENTEN </H2>
<p> Hieronder kun je je aanmelden voor de evenementen. Wanneer je status op "Aanwezig" staat, ben je aangemeld voor het desbetreffende evenement. </p>
</div>
<button id="button" class="btn"> </button>

<script src="templates/templatename/js/status.js"> </script>

和status.js：

// JavaScript Document
$(document).ready(function(){

$( "#button" ).click(
    function() {
        $("#button").addClass("btn-primary");
    }
    );
});

它给出了错误

Uncaught TypeError: undefined is not a function

它所指的行是代码$(document.....的第一行

当我在另一个文件中尝试这个时，没有 joomla ed.它工作正常。为什么 jquery 没有按预期加载？

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href="https://localhost/index.php/leden/evenementen" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Super User" />
  <meta name="description" content="templatename" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Evenementen</title>
  <link href="https://localhost/index.php/leden/evenementen" rel="canonical" />
  <link href="/templates/templatename/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/media/jui/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/media/jui/css/bootstrap-responsive.min.css" type="text/css" />
  <link rel="stylesheet" href="/media/jui/css/bootstrap-extended.css" type="text/css" />
  <link rel="stylesheet" href="/media/system/css/frontediting.css" type="text/css" />
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/media/system/js/frontediting.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
            new JCaption('img.caption');
        });
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
jQuery(document).ready(function()
        {
            jQuery('.hasPopover').popover({"html": true,"trigger": "hover focus","container": "body"});
        });
window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new XMLHttpRequest():new        ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r){r.open("GET","./",true);r.send(null)}},840000);
  </script>
     <!--[if lt IE 9]>
    <script src="/media/jui/js/html5.js"></script>
<![endif]-->
<link href="/templates/templatename/css/custom.css" rel="stylesheet" type="text/css" >
<script src="/templates/templatename/js/global.js"></script>
</head>

【问题讨论】：

标签： jquery twitter-bootstrap joomla

【解决方案1】：

美元别名可能不是为 jQuery 保留的，因为它可能会被 MooTools 使用。试试这个：

jQuery(document).ready(function($) { ...

或简写：

jQuery(function($) { ...

这会创建一个 jQuery 对象并将美元别名作为参数传递，以便在内部可用。

另一种可能是 jQuery 已经加载（Bootstrap 依赖于它），而你已经加倍了。这会破坏事情。检查您的页面源代码并确保只加载了一个 jQuery 实例。

【讨论】：

【解决方案2】：

不是一个确切的解决方案，但在某些情况下对我有用。

var interval = setInterval(function(){
 if(typeof $!="undefined"){   //check whether jQuery is loaded or not

  $( "#button" ).click(
    function() {
        $("#button").addClass("btn-primary");
    }
    );
  clearInterval(interval);
 }
},500)

这里我假设 jquery 还没有加载。

【讨论】：