Javascript Jquery Mobile标题中带有复选框的可折叠div_Javascript_Jquery_Html_Jquery Mobile_Checkbox

Javascript Jquery Mobile标题中带有复选框的可折叠div

javascript jquery html jquery-mobile checkbox

Javascript Jquery Mobile标题中带有复选框的可折叠div,javascript,jquery,html,jquery-mobile,checkbox,Javascript,Jquery,Html,Jquery Mobile,Checkbox,这是我的html代码： <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="

这是我的html代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>

<div id="questionsPage" data-role="page" data-add-back-btn="true">

<div data-role="header">
    <h1>Questions</h1>
</div>

<div data-role="content">
<div id="questions_list" data-role="collapsible-set" data-theme="a" data-content-theme="d" data-inset="false"></div>
</div>

</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/questions_list.js"></script>
</body>

</html>


问题

这是问题列表js：

$('#questionsPage').live('pageshow', function(event) {
    var id = getUrlVars()["id"];
    $.getJSON(serviceURL + 'api/questions.json?id=' + id, function(data) {
        questions = data;
        $.each(questions, function(index, question) {
            $('#questions_list').append('<div data-role="collapsible" id="section_' + question.id + '">' +
                                        '<h2>' + question.question + '<input type="checkbox" id="checkbox_' + question.id + '" /></h2>' +
                                        '<p>test</p></div>');
            $('#section_' + question.id).collapsible();
        });
    });
});

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

$（'questionsPage'）.live（'pageshow'，函数（事件）{
var id=getUrlVars（）[“id”]；
$.getJSON（serviceURL+'api/questions.json？id='+id，函数（数据）{
问题=数据；
$。每个（问题、功能（索引、问题）{
$（“#问题列表”）。附加（“”+
''问题，问题''+
“测试”）；
$（'#section.'+question.id）.collapsable（）；
});
});
});
函数getUrlVars（）{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i


嗯，我可以看到带有复选框的div。
但是当我点击复选框时，div被折叠，复选框没有被选中
我想说的是，当我点击复选框时，它会被选中。
当我单击其他任何地方时，只有div会在不选中复选框的情况下崩溃
多谢各位
 紧接着：
$('#questions_list').append('<div data-role="collapsible" id="section_' + question.id + '">' +
                                        '<h2>' + question.question + '<input type="checkbox" id="checkbox_' + question.id + '" /></h2>' +
                                        '<p>test</p></div>');

我现在正在查看你的代码，到目前为止，我不能说我能完全理解你的解决方案，但是，我可以说，我有一个插件可以帮助你使用这个讨厌的小url函数。如果没有示例，需要更好地解释您的问题，我不太明白问题所在？不要参考代码，脚本通过ajax将可折叠div添加到可折叠集中。在可折叠标题旁边，我想添加一个复选框，因此当我单击此复选框时，它将被选中，而不带div collapseOh。在这种情况下，您需要向使用jQuery的复选框添加一个单击事件！这将防止点击事件从复选框中冒泡出来。你能给我写一个例子吗？我对这个井人很陌生，我有一个错误：“uncaughttypeerror:Object[Object Object]没有方法‘on’lol，np，如果你没有。on，你一定在运行旧版本？
//  This will simply stop the check box from allowing its parent to be clicked (collapsed) while the checkbox itself is clicked
//  I havn't tested, but should work
$('#checkbox_' + question.id).on("click", function(e) { e.stopPropagation(); });