Reputation: 75326
I have a html button using dojotype
attribute:
<button id="btnSearchEmployees" dojotype="dijit.form.Button">
Search
</button>
and trying to use jQuery to handle click event on this button:
$("#btnSearchEmployees").click(function() {
alert("test");
});
But it is not working, if I take out dojotype
attribute, it works normally:
<button id="btnSearchEmployees"> Search </button>
How can I avoid this?
Edit: Here is what dojo change:
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" style="width: 70px;" widgetid="btnSearchEmployee">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="btnSearchEmployee_label" tabindex="0" id="btnSearchEmployee">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">?</span>
<span class="dijitReset dijitInline dijitButtonText" id="btnSearchEmployee_label" data-dojo-attach-point="containerNode">Search</span>
</span>
</span>
<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>
Upvotes: 0
Views: 811
Reputation: 3725
You should use
dojo.connect(dijit.byId("btnSearchEmployees"), "onClick", function(){
alert("test");
});
It is because once you use dojoType(or data-dojo-type). The dojo parser will replace the original dom into the template which your dijit declares. The result may be completely different with what your markup writes(as showed by you). It generate a new id for the outermost dom. So what you actually click is not the original Button element. Then you have to use it as "dojo widget", which can only retrieved via dijit.byId.
If you are using dojo framework already, it has most features you need. You don't have to use JQuery as well.
Upvotes: 5