Jquery datajoin plugin not working properly

I have been trying to use the datajoin plugin of jquery to bind a JSON object to a set of input elements. My html looks like the following -

<script type="text/javascript" language="javascript" src="/LearningJSP/FirstOne/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/LearningJSP/FirstOne/jquery.datajoin.1.1.js"></script>

<script 开发者_Python百科type="text/javascript">
var obj = {
    username : 'strongb',

    name : {

              first : 'Strong',

              last : 'Bad'

           },

    color : 'blue'
};
$('#container').datajoin( obj );

</script>

<div id="container">
   <div data-join="username"></div>
   <input type="text" data-join="name.first" />
   <input type="text" data-join="name.last" />
   <select data-join="color">
       <option>green</option>
       <option>blue</option>
   </select>
</div>

</html>

However, when I keep the breakpoint on obj.color or obj.username in my firebug, they dont change with the changed values in the input elements.

Can anyone please help me out - what I might be doing wrong.

the form is not ready when you are running your script so here is what you can do:

<script type="text/javascript">
var obj = {
    username : 'strongb',
    name : {
              first : 'Strong',
              last : 'Bad'
           },
    color : 'blue'
};

$(function () {
   // run it when the DOM is ready
   $('#container').datajoin( obj );

});

    // and voila
</script>