javascript - kendo dropDownList onclick 文本更改事件未触发

Question

我正在使用kendo UI。 我有一个复选框的下拉列表。 当用户单击复选框时，将触发 onchange 事件。但当用户单击文本时，该事件不会触发。

预先感谢您的帮助! -赛。

<script type="text/x-kendo-template" id="CheckboxTemplate">
    <li unselectable="on" class="k-item nowrap check-item">
        <input type="checkbox" name="#= text #" value="#= value #" class="check-input showcolname" checked />
        <span>#= text #</span>
     </li>
</script>


function populateDropdown() {           
        dropdown = $("#dropDownList").kendoDropDownList({
           dataTextField: "text",
           dataValueField: "value",
           template: $("#CheckboxTemplate").html(),
           dataSource: displayColumns,             
           placeholder: "Select...",
            select: function(e) {
                e.preventDefault();
            }
       }).data("kendoDropDownList");

        dropdown.list.width(250);

        dropdown.list.find(".check-input,.check-item").bind("click", function(e) {
            var $item = $(this);
            var $input;         
            if($item.hasClass("check-item")) {
                // Text was clicked
                $input = $item.children(".check-input");
                $input.prop("checked", !$input.is(':checked'));
            } else {
                // Checkbox was clicked
                $input = $item;                                   
            }                                    
            // Check all clicked?
            if($input.val() == "") dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
            syncColumns();

            e.stopImmediatePropagation();
        });

    }

函数syncColumns(){

 $('.showcolname').each(function() {
              $(this).change(function(event) {
                   event.preventDefault();
                   var val = $(this).val();
                   var url = "${rootContext}${MyUrl}/"+val+"/"+this.checked;
                   var beforeSendCallBack = function() {};
                   var successCallback = function(data) {};
                   submitPost(url, beforeSendCallBack, successCallback, '','');
                  });
          });                   

}

Answer 1

然后，您使用 Jquery prop 方法更改选中的属性，输入不会触发更改事件。所以你必须使用 Jquery 触发器手动触发它。欲了解更多信息，请查看此question 。另外，您必须在触发事件绑定(bind)之前注册事件绑定(bind)，或者使用 Jquery。