Question

使用jquery mobile。所以我有一个按钮点击调用的函数，它创建复选框并将它们插入到div中。它们显示和运行正常，但不像我项目中的其他任何东西一样以我的按钮样式为主题。如果我只是在div中手动输入html。然后造型是正确的。但是如果我通过jquery插入它们就不行了。我错过了什么。

var html = '<fieldset data-role="controlgroup">';
        html += '<label for="radio-choice-01">First Name</label><input name="radio-choice-0" id="radio-choice-01" type="radio" data-theme="a">';
        html += '<label for="radio-choice-02">Second Name</label><input name="radio-choice-0" id="radio-choice-02" type="radio" data-theme="a">';
        html += '</fieldset>';
        $("#names_content").html(html);

$("input[name=namechoice]:radio").change(function(){
     var tempVal = $('input:radio:checked').val();
     alert("clicked");
     console.log(tempVal);
});

Answer 1

您需要手动增加其标记：

$('[type="radio"]').checkboxradio();

或使用：

$("#names_content").trigger('create');

工作示例：http://jsfiddle.net/Gajotres/HPSCb/

$(document).on('pagebeforeshow', '#index', function(){ 
 var html = '<fieldset data-role="controlgroup">';
        html += '<label for="radio-choice-01">First Name</label><input name="radio-choice-0" id="radio-choice-01" type="radio" data-theme="a" checked="checked" value="1">';
        html += '<label for="radio-choice-02">Second Name</label><input name="radio-choice-0" id="radio-choice-02" type="radio" data-theme="a" value="2">';
        html += '</fieldset>';
        $("#names_content").html(html);      
        $("#names_content").trigger('create');

    $(document).on('change',"input[name=radio-choice-0]:radio",function(){
         var tempVal = $('input:radio:checked').val();
         alert(tempVal);
         console.log(tempVal);
    }); 
});

必须增强每个动态添加的内容。有几种解决方案，您可以找到它们here。

Jquery Mobile复选框已插入且未显示主题

1 个答案: