【问题标题】:jquery mobile dynamically create a radio button and listen to click eventjquery mobile动态创建单选按钮并监听click事件
【发布时间】:2016-01-01 15:12:54
【问题描述】:

我惊讶地被困在一个非常不寻常的地方,试图创建一个单选按钮并监听它的点击事件。

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>

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

【问题讨论】:

  • 您的问题是您的无线电组实际上渲染得很好,但点击事件不起作用?为什么不试试$(".app-radio-chk").click(function(){alert('hi)})
  • 这是导致问题的原因 -- ($(".app-ct-child-holder").controlgroup("refresh"); $(".app-ct-child-holder" ).trigger("create");) -- jsfiddle.net/2rh5947r -- 你想通过添加这些来实现什么。也许你应该使用api.jquerymobile.com/enhancewithin
  • @ardabeyazoglu 不起作用,因为它是一个动态添加的组件。因此可能需要 .live()、.on() 或 .bind()。
  • @Tasos 感谢 jsfiddle。我很抱歉没有提到我曾尝试不做controlgroup("refresh")trigger("create")。这不会以 jQuery 方式呈现单选按钮。我可以在您的示例中看到您避免了这些语句并且事件被捕获。反正我两个都可以吗?对于enhanceWithin()jsFiddle 将显示我对enhanceWithin() 的尝试。
  • 这实际上就像我在你的小提琴中尝试过的那样工作:$(contents).appendTo( ".app-ct-child-holder" ).trigger('create');$(document).on('click', '.app-radio-chk', function() {alert('hi');});

标签: javascript jquery jquery-mobile


【解决方案1】:

问题不在于动态添加的单选按钮。问题是您无法访问输入字段。那是因为方式,jqm 为元素设置样式。

&lt;input&gt; 元素具有 css 样式 z-index: 1&lt;label&gt; 具有 css 样式 z-index: 2 因此,您看不到屏幕上的输入字段。如果您没有看到某个元素,则无法单击它。将您的点击侦听器更改为标签,一切正常。

【讨论】:

    猜你喜欢
    • 2020-08-26
    • 2014-08-04
    • 2012-01-22
    • 1970-01-01
    • 1970-01-01
    • 2021-08-09
    • 2012-10-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多