Question

I am using jquery mobile alpha 4. I simply bind a click event on a span tag with matching id like:

function bindwChk() {

    $j(".wchk").bind('click', function (event) {
        // unbind this event first so that the user cannot click again on word while
        // current event is in progress
        $j(".wchk").unbind('click')

        if (!$j("#wchkdiv")[0]) {
            $j("#misc-cntr").append('<div id="wchkdiv" data-rel="dialog" > </div>');
            $j("#wchkdiv").dialog();


        }

$j('#wchkdiv').html($j("#d1").html());

$j.mobile.changePage($('#wchkdiv'), { transition: "slideup"});

return false;

    });
}

When I click on the word the dialog transition animation displays for a small fraction of a second but after that page is blank white space and the dialog seems to be invisible.

Any one knows the solution?

Answer 1

This problem got fixed after I removed the

<div data-role="page">

from the dialog markup. For some reasons, the data-role=page in the dialog would make the dialog invisible.