Javascript - 动态添加的复选框在 Kendo Panelbar 标题中没有按预期工作

Question

我有这个 fiddle这在添加静态复选框时有效。 我正在为 Accordion 面板创建复选框，如下所示:

liID = "tab" + x;
$("<li id = '"+ liID +"' class='k-item k-last k-state-default' aria-expanded='false'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><span  id='cbSelect" + x + "'></span>" + liID + "</label></li>").appendTo("#panelbar");

上面的 x 值是 for 循环 variable。

我在复选框上使用了以下样式:

input[type="checkbox"]
{
    display:none;
}

input[type="checkbox"] + label span
{
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/checkBox.png') right top no-repeat;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label span 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

上面的checkbox.png图片如下:

它显示复选框，但在单击时不允许检查事件，因为它在允许此操作之前首先打开选项卡。

我试过使用以下方法:

$("#panelbar").on("click", "input.cbSelect", function(evt) 
{
    evt.stopPropagation();
});

但我不确定我是否正确链接它，因为它与我使用 display:none;

隐藏的普通复选框链接

当普通复选框与新样式的复选框一起显示时，以及单击原始复选框时，它会按预期工作。 我希望能够单击新创建的复选框并对其使用 stopPropagation，而不是单击原始复选框。

这是第一个问题，下一个是我正在为网格创建一个复选框，如下所示:

var chkBox =  "<input type='checkbox' id='cUpload1' class='cbSelect' /><label for='cUpload1'><span  id='cbSelectUpload'></span>test1</label>";

然后像这样尝试将它添加到一个简单的 dataSourse 中:

var uploadedFiles = 
[
    { 
        facility: "Sunrise medical Laboratories", 
        documentName:  "Lab Results",
        documentType: "PDF",
        selected: chkBox
    }
];

用于上述复选框的样式未应用于该复选框，因为未显示任何内容。

知道为什么它不起作用吗？

顺便说一句，我正在尝试将以上所有内容都应用到这个 fiddle 中. 上述编码目前不在 fiddle 中。

我们将不胜感激!

Answer 1

您的第一个问题主要是与剑道的互动。 选择器 "input.cbSelect" 不正确，因为您要将原始复选框替换为仅带有标签的复选框。所以实际上你是在点击标签而不是复选框本身。正确的应该是 "li label span" 但即便如此它也不起作用，因为您无法阻止 kendo 选择面板。

甚至

$("#panelbar").on("click", "label span", function(evt) {
    evt.stopImmediatePropagation();
    return false;
})

不会阻止剑道选择。

但是您实际上可以做的是使用 html 操作解除子项与父项的绑定(bind)，因此剑道处理程序不会触发:

解决方案:

在你的模板中替换

<span  id='cbSelect" + x + "'></span>

与

<a href="#" id='cbSelect" + x + "'></a>

并在您的输入 css 中将 span 与 a。

a-Element 触发一个单独的 Action ，所以现在你可以停止剑道处理程序

$("#panelbar").on("click", "label a", function(evt) {
    evt.stopImmediatePropagation();
});

现在的问题是，通过单击标签来检查复选框也不起作用。所以我们必须通过扩展上面的处理程序来手动执行此操作:

$("#panelbar").on("click", "label a", function(evt) {
    var chkbx = $(this).closest('li').find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    evt.stopImmediatePropagation();
})

工作示例:
http://jsfiddle.net/Nitro3k/5nX8r/47/

替代方案:

如果你不想要标签内的链接，你也可以:

1. 完全删除跨度，直接设置标签样式并调用 return false; 而不是 evt.stopImmediatePropagation();
2. 构建一个自定义复选框，因为无论如何您都必须使用 js 触发它:

移除标签，改为使用 block 样式(例如 .checkbox)和选中的类(例如 .checkbox.checked)。 围绕复选框构建 block :

<div class="checkbox"><input type='checkbox' id='c1' class='cbSelect' /></div>

并添加处理程序:

$(document).on('click', '.checkbox', function(){
    var chkbx = $(this).find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    $(this).toggleClass('checked');
})