Question

当我测试页面并单击复选框时，没有任何反应。如果我转到另一个页面并返回，则该复选框可以正常工作。

HTML

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
       <input id="checkbox8" name="addTo" data-theme="b" type="checkbox">
       <label for="checkbox8"> add to</label>
</fieldset>

JQuery的

$("input[type = 'checkbox']").change(function(){
        var item=$(this);
        if(item.is(":checked")){    
            $('#myMenu').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('test'));
            $('#myMenu').listview('refresh');
        }
        else {
                $( "#myMenu li:last-child" ).remove().closest( "[data-role=listview]" ).listview( "refresh" );  
        }
});

为什么？我不希望最初设置复选框。我们的想法是选中该框，所选对象会动态更新并显示在另一个页面的列表视图中。

Answer 1

在首先执行此操作之前，您需要确保将页面加载到DOM中。不要使用文档，因为它可以在jQM页面加载到DOM之前触发。相反，你应该使用正确的jQuery Mobile page event。

$(document).on('pageinit', '#index', function(){ 
    $(document).on('change','input[type="checkbox"]',function(){
        var item=$(this);
        if(item.is(":checked")){    
            $('#myMenu').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('test'));
            $('#myMenu').listview('refresh');
        }
        else {
            $( "#myMenu li:last-child" ).remove().closest( "[data-role=listview]" ).listview( "refresh" );  
        }
    });      
});

#index 是您网页的ID。 Pageinit事件是jQuery Mobile替代经典jQuery文档就绪状态。

或者在我的示例中，您可以将更改事件绑定一点点不同：

$(document).on('change','input[type="checkbox"]',function(){

此解决方案称为委托绑定，并且不关心元素是否已加载到DOM中。

here's一个有效的例子

修改

使用HTML示例：

<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script> $(document).on('pageinit', '#index', function(){ $(document).on('change','#checkbox8',function(){ var item=$(this); if(item.is(":checked")){ alert('Checked'); } else { alert('Unchecked'); } }); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>Index page</h1> </div> <div data-role="content"> <fieldset data-role="controlgroup" data-type="vertical" data-mini="true"> <input id="checkbox8" name="addTo" data-theme="b" type="checkbox"/> <label for="checkbox8"> add to</label> </fieldset> </div> </div> </body> </html>

第一次无法在物理上选中复选框

1 个答案: