cuongle
cuongle

Reputation: 75326

dojotype change the id of button

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

Answers (1)

Chris Li
Chris Li

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

Related Questions