Javascript ne pas exécuter lorsqu'il est placé dans le fichier script externe

StackOverflow https://stackoverflow.com/questions/3897150

Question

Je construis un site ASP.NET MVC où je besoin d'un éditeur de tags, similaire à celui utilisé sur le débordement de pile. Je l'ai déjà regardé comment accomplir la autocomplétion nécessaire avec jQuery UI, mais j'ai rencontré un problème. lorsque je place le script dans un fichier .js externe, il n'exécute pas

Voici mon test.html: 

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="http://jqueryui.com/jquery-1.4.2.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.position.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
    <script src="jquery.tagautocomplete.js"></script>
    <script> 
    $(function() { bindAutoTagComplete('#birds'); })
    </script>
</head> 
<body> 
    <label for="birds">Birds: </label> 
    <input id="birds" size="50" /> 
</body> 
</html>

Voici jquery.tagautocomplete.js: 

function bindAutoTagComplete(item, otherRootDomain)
{
        function split( val ) {
            return val.split( / \s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $(item).autocomplete({
            source: function( request, response ) {
                $.getJSON('http://jqueryui.com/demos/autocomplete/search.php', {
                    term: extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
    }

Que pensez-vous peut causer ce problème? Je manque probablement quelques parantheses de fermeture / accolades dans le fichier .js ...

Merci à l'avance!

Était-ce utile?

La solution

Vous devez joindre cet événement après la page est prête. ne #birds existe pas quand il fonctionne actuellement.

Quelque chose comme 

<script>
$(document).ready( function(){  bindAutoTagComplete('#birds'); } );

</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top