JQuery QueryBuilder funktioniert nicht

Question

Ich verwende JQuery QueryBuilder in meiner HTML-Seite. Ich habe die installation guide verfolgt. Mein HTML Kopf beinhaltet folgende

<script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/moment/moment.js"></script> 
    <script src="bower_components/jquery-extendext/jQuery.extendext.js"></script> 
    <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link href="bower_components/jQuery-QueryBuilder/dist/css/query-builder.default.css" rel="stylesheet" type="text/css" /> 
    <script src="bower_components/jQuery-QueryBuilder/dist/js/query-builder.standalone.js"></script> 

Mein Körper

<div id="builder"></div> 

hat aber wenn ich

<script> 
    $('#builder').queryBuilder({ 
    filters: [ ... ] 
    }); 
</script> 

Mein Chrome-Konsole sagt

query-builder.standalone.js:437 Uncaught TypeError: Cannot set property 'queryBuilder' of undefined 

Alle meine Kemenate componenets sind richtig installiert.

Was mache ich falsch?

Answer 1

Bewegen Sie das Skript unter dem builder div Element

<div id="builder"></div> 

<script> 
    $('#builder').queryBuilder({ 
    filters: [{id:1}] // You need to implement this 
    }); 
</script> 

oder verwenden JQuery document.ready

$(document).ready(function(){ 
    $('#builder').queryBuilder({ 
     filters: [{id:1}] // You need to implement this 
    }); 
    })