Question

我正在使用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，但是说'modal'不是函数

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

然而一切正常，模态工作，我只是不能使用js使它们出现... 事实上，任何类型的库都会在$（'＃someID'）。someFunction（）;等DOM对象中添加一个函数。这总是一样的错误：

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

Answer 1

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

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

twitter bootstrap + grails kickstart打破jquery

1 个答案: