Question

我出乎意料地陷入了一个非常不寻常的地方，试图创建一个单选按钮并在其上收听点击事件。

HTML页面如下：

<h4><b>Header</b><span class="pull-right app-selected-title"></span></h4>
<fieldset data-role="controlgroup" class="app-ct-child-holder"></fieldset>

javascript是

<script type="text/javascript">
    $(document).on("pagecreate","#pageOne",function(){
        $(".app-ct-child-holder").append('<label class="app-radio"><input type="radio" class="app-radio-chk" name="t" data-nm="test_name" id="1" data-tl="Title">Click me</label>');
        $(".app-ct-child-holder").controlgroup("refresh");
        $(".app-ct-child-holder").trigger("create");
        $(document).on('click', '.app-radio-chk', function() {
            alert('hi');
        });
    });
</script>

在我的HEAD中，我有以下内容

<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

我无法理解我错过了什么。但警报并没有到来。我在这里错过了什么吗？

Answer 1

问题不是动态添加的单选按钮。问题是您无法访问输入字段。多数民众赞成因为方式，jqm风格的元素。

<input>元素的css样式为z-index: 1，<label>的css样式为z-index: 2 因此，您无法在屏幕上看到输入字段。如果您没有看到元素，则无法点击它。将您的点击监听器更改为标签，一切都应该正常。

jquery mobile动态创建一个单选按钮并收听click事件

1 个答案: