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

时间:2015-01-29 22:33:22

标签: javascript jquery checkbox kendo-ui

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

提前感谢您的帮助! -Sai。

<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();
        });

    }

function 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, '','');
                  });
          });                   

}

1 个答案:

答案 0 :(得分:2)

然后使用Jquery prop方法输入更改checked属性输入不会触发更改事件。所以你必须使用Jquery触发器手动触发它。有关详细信息,请查看此question。你也必须在触发之前注册事件绑定,或者使用Jquery。