MooTools: Set focus on click

Question

I've got an ASP.NET control that contains a checkbox. I want the focus to remain on this checkbox when it's clicked. Here's what I'm using:

<script type="text/javascript">
    window.addEvent("domready", function() {

        var acceptCheckId = $("<%= this.accept.ClientID %>").getElement("input");

        acceptCheckId.addEvent("click", function() {
            acceptCheckId.focus();
        });

    });
</script>

I can get the checkbox element into the acceptCheckId variable okay, but when I click on it, the focus doesn't change. What gives?

If I add an alert in, the alert never fires:

    acceptCheckId.addEvent("click", function() {
        alert("foobar");
        acceptCheckId.focus();
    });

Answer 1

What does your output HTML look like? it's impossible to say what's wrong w/ the code w/o knowing how your <% %> content is written.

<script type="text/javascript">
window.addEvent("domready", function() {

    var acceptCheckId = $("<%= this.accept.ClientID %>").getElement("input"); 
    // $('elementId').getChildren('input');
    // You can't put an entire element in there                                                 

    acceptCheckId.addEvent("click", function() {
        acceptCheckId.focus();
    });

});
</script>

Answer 2

try use setTimeout

setTimeout(function(){ acceptCheckId.focus(); // this may execute ok },200);

// when you click a element, the element will get focus, and you can't focus other element now, because this element will get focus first, and use setTimeout, may delay sometime, and after this time , you can set focus to any element .

look the click execution order : click -- > execute onclick function --> get focus -->

in step 2 , the onclick function, you set focus to other element, but, after execution the onclick function, the element itself should get focus, this done by web browser!