Question

这是我的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>

这是question_list.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;
}

好吧，我可以看到带有复选框的div。但是当我点击复选框时，div就会折叠，并且没有选中复选框。

我想要的是，当我点击复选框时，它会被检查。当我点击其他任何地方时，只有div才会崩溃而不检查复选框。

非常感谢！

Answer 1

紧接着：

$('#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>');

插入：

//  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(); });

可折叠div与标题中的复选框，Jquery Mobile

1 个答案: