Jquery mobile jQuery移动复选框通过淘汰can动态添加'；不可阻挡

我尝试通过使用Knockout将复选框添加到我的页面中。 但这些动态添加的复选框不能通过单击来选中。 如果我使用jQuery添加一个框，则生成的HTML不同于淘汰复选框。

输入

被包装在另一个

中。 如果未使用自定义绑定

复选框

，也没有区别。 有人知道如何解决这个问题吗

• jQuery:1.10.2
• jquerymobile:1.3.2
• 淘汰赛：2.3.0

这是一把小提琴：

HTML:

JS:

var-BoxModel=函数（id、名称）{
this.id=ko.可观察（id）；
this.name=ko.observable（name）；
};
var MainModel=函数（）
{
this.box=ko.observearray（[]）；
}
var main=新的MainModel（）；
$（'#add ko'）。单击（函数（）{
变量i=$（'#fiddle'）.find（'input[type=checkbox]'）。长度+1；
main.box.push（新的BoxModel（'id'+i，'name'+i））；
});
$（“#添加jqm”）。单击（函数（）{
变量i=$（'#fiddle'）.find（'input[type=checkbox]'）。长度+1；
$（'fiddle'）.append（'name'+i+''）.trigger（'create'）；
});
// http://stackoverflow.com/a/15841271/2710739
ko.bindingHandlers.checkbox={
init:函数（元素，值访问器）{
//将dom元素设置为复选框并初始化它（对于jquerymobile）
var复选框=$（元素）；
checkbox.checkboxradio（）；
attr（'type'，'checkbox'）；
},
更新：函数（元素、值访问器）{
//更新选中的绑定，即选中或取消选中复选框
ko.bindingHandlers.checked.update（元素，valueAccessor）；
//并刷新元素（对于jquerymobile）
var复选框=$（元素）；
checkbox.checkboxradio（“刷新”）；
}
};
ko.应用绑定（主）；

生成的HTML（从Chrome开发工具复制）：

名称1
姓名2

我再次查看了数据库，发现

数据role=“none”

。它防止JQM自动增强元素。现在我可以添加复选框，然后让BindingHandler通过

checkbox.checkboxradio（）

增强它们

现在，复选框如下所示：

---

这是一个更新的提琴：

这是一个为淘汰赛v3更新的提琴：

主要的调整是绑定的更新方法

update: function(element, valueAccessor) {       
    if (ko.bindingHandlers.checked.update) {
         ko.bindingHandlers.checked.update(element, valueAccessor);
    }
    else 
    {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).prop( "checked", value);
    }

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh');
}

---

首先，你有几个语法问题，我在那里解决了。他们可能没有破坏任何东西，但他们没有帮助。除了可能有一个隐藏的复选框来表示jQuery mobile正在创建的伪元素之外，我不太明白jQuery mobile试图用第二个复选框做什么，无论哪种方式，我都没有用它来提供足够的帮助，但是当您添加jqm复选框，然后添加knockout时，可能有人可以用它来帮助回答这个问题。它打破了以前添加的jqm复选框的结构。我不是一个淘汰赛专家，但这似乎是一个常见的问题。我发现很多帖子都没有明确的答案。我找到了一个解决方案并将其作为答案添加。

var BoxModel = function(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
};

var MainModel = function()
{
    this.boxes = ko.observableArray([]);
}
var main = new MainModel();

$('#add-ko').click(function() {
    var i = $('#fiddle').find('input[type=checkbox]').length + 1;
    main.boxes.push(new BoxModel('id'+i, 'name'+i));
});
$('#add-jqm').click(function() {
    var i = $('#fiddle').find('input[type=checkbox]').length + 1;
    $('#fiddle').append('<label><input type="checkbox" /><span>name'+i+'</span></label>').trigger('create');
});

// http://stackoverflow.com/a/15841271/2710739
ko.bindingHandlers.checkbox = {
    init: function(element, valueAccessor) {    
        // set the dom element to a checkbox and initialize it (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio();
        checkbox.attr('type', 'checkbox');
    },
    update: function(element, valueAccessor) {
        // update the checked binding, i.e., check or uncheck the checkbox
        ko.bindingHandlers.checked.update(element, valueAccessor);

        // and refresh the element (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio('refresh');
    }
};

ko.applyBindings(main);

<button data-bind="click: add">Add checkbox</button>

<!-- show checked boxes -->
Checked: 
<div id="checkedBoxes" data-bind="foreach: boxes">
    <span data-bind="text: name, if: checked"></span>
</div>
<hr>

<!-- checkboxes -->
<div id="newBoxes" data-bind="foreach: boxes">
    <label>
        <input type="checkbox" data-bind="checkbox: checked" data-role="none" />
        <span data-bind="text: name"></span>
    </label>
</div>

update: function(element, valueAccessor) {       
    if (ko.bindingHandlers.checked.update) {
         ko.bindingHandlers.checked.update(element, valueAccessor);
    }
    else 
    {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).prop( "checked", value);
    }

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh');
}