twitter bootstrap + grails kickstart 打破 jquery答案

【问题标题】：twitter bootstrap + grails kickstart breaks jquerytwitter bootstrap + grails kickstart 打破 jquery
【发布时间】：2014-10-10 11:43:03
【问题描述】：

我正在使用 grails kickstart 在我的应用程序上添加 twitter 引导程序，这导致 jquery 库出现问题。我无法在 DOM 对象上调用函数：

我有什么：

<script>

$(function()
{
    //Loads the modal when page loads
    $.post('${createLink(controller: 'task', action:'create')}',
    function(data)
    {
        $('#AndersonModal').html(data);
    }, "html");

    $('#andersonTest').click(function ()
        {
            console.log("modal button clicked");
            $('#AndersonModal').modal('show');
        });
});
</script>

<a id="andersonTest" href='#'>Anderson</a>

<div id="AndersonModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

当我点击链接时，它会触发 js，但说“模态”不是函数

TypeError: $(...).modal is not a function 1:129
Empty string passed to getElementById(). bundle-bundle_bootstrap_defer.js:4
"modal button clicked"

然而一切正常，模态也正常工作，我就是不能用 js 让它们出现...... 事实上，任何在 DOM 对象中添加函数的库都会发生这种情况，例如 $('#someID').someFunction();。总是同样的错误：

"TypeError: $(...).someFunction is not a function"

有人知道我该如何解决吗？

我的应用程序上的插件：

plugins {
        build ":tomcat:7.0.52.1"
        compile ":scaffolding:2.0.3"
        compile ':cache:1.1.2'
        compile ':spring-security-core:2.0-RC4'
        compile ":mail:1.0.6"
        compile ":kickstart-with-bootstrap:1.1.0"
        compile ":rest:0.7"
        compile ":modernizr:latest.integration"
        compile ":uploadr:0.8.2"
        compile ":quartz:1.0.1"//latest.integration" //1.0.1"

        runtime ":hibernate:3.6.10.13" // or ":hibernate4:4.3.5.1"
        runtime ":database-migration:1.4.0"
        runtime ":jquery:1.11.0.2"
        runtime ":resources:1.2.7"
        runtime ':spring-security-acl:2.0-RC1'
    }

编辑：

正在使用的模块：

<g:javascript src="fastclick.js"/>
<r:require modules="jquery"/> <%-- jQuery is required for Bootstrap! --%>
<r:require modules="bootstrap"/>
<r:require modules="bootstrap_utils"/>

<r:layoutResources />
<g:layoutHead />

【问题讨论】：

通常当我没有将适当的资源加载到页面中时，我会看到这个。如果您使用的是 kickstart，那么所有必需品都应该加载到布局 content.gsp 中，但是看不到您的页面，我无法判断其中有什么。
@SteveHole，谢谢，我发现这是与正在加载的不同版本的 jQuery 冲突。

标签： javascript jquery twitter-bootstrap grails

【解决方案1】：

我发现它是由于冲突而发生的，因为正在加载多个 jQuery 版本。因此我需要使用jQuery.noConflict()来解决它：

$('#andersonTest').click(function ()
    {
        $2 = jQuery.noConflict( true );
        console.log("modal button clicked");
        $2('#AndersonModal').modal('show');
    });

【讨论】：