Dojo事件未触发

Question

I have a Dojo tab-container and when I click on certain buttons, a new tab is added dynamically with its contents downloaded via Ajax. The tabs contain dynamic form elements which are parsed and loaded by Dojo just fine. I am also including Javascript blocks which are specific for each tab and those are downloaded as well via Ajax... however, none of the Javascript blocks execute!

Example of tab content:

<input id="test" name="test" type="text" dojoType="dijit.form.ValidationTextBox" />

<script type="text/javascript">
   dojo.connect(dijit.byId('test'), 'onClick', function(evt){
       alert('testing 123');
   });
</script>

However, if I do this instead the events trigger just fine:

<input id="test" name="test" type="text" dojoType="dijit.form.ValidationTextBox">
    <script type="dojo/method" event='onClick'>
         alert('testing 123');
    </script>
</input>

My question is, why don't Javascript blocks in the first example work? is this a Dojo limitation? Also, I am also trying to set properties and values for the widgets AFTER they've been loaded. How do i active that given I have to use something like dojo.addOnLoad() which won't work because it requires a Javascript block and that doesn't work as per the first example... There is no equivalent widget onLoad event so I can't use the second method either... Any ideas how to go about doing this?

Answer 1

It looks like you need to use dojo.hitch so that your function will be in scope when it is actually called. Try using:

dojo.connect(dijit.byId('test'), 'onCLick', dojo.hitch(this, function(evt) {
      alert('testing123');
}));

You can read more about it here: http://dojotoolkit.org/reference-guide/dojo/hitch.html#dojo-hitch