复选框事件未使用jQuery触发 [英] checkbox event is not firing with jquery

问题描述

在使用Kendo UI的层次结构网格模式.建筑就是这样...

I have got checkbox row in parent grid and checkbox row in child grid as well in Hierarchy grid mode using kendo UI. the architecture is like this...

我在父网格中有四行，其中一列是复选框，对于每一父行，我都有一个子网格，其中有4行，还有一个复选框列...

I have got four rows in parent grid,in that one column is checkbox and for every parent row i have got one child grid with 4 rows in it and one checkbox column as well...

如果我单击父网格行中的复选框，则只需要访问与该行相关的子网格列中的复选框，并且需要将该子网格的选中属性设置为true ....

If i click the checkbox in parent grid row i need to access the checkboxes in child grid column related to this row only and need to set the checked attribute as true for that child grid.....

为此，我正在访问像这样的父网格复选框.

for that I am accessing the parent grid checkbox like this ..

这是javascript函数

this is javascript function

  <script type="text/javascript">
    $('.chkbxq').live('click', function (e) {
        alert('1'); // this alert is not firing 
        var checkchildgrid = $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').is(':checked');
        alert(checkchildgrid);
        if ($(this).is(':checked')) {    
            checkchildgrid.attr('checked', 'checked');
        } else {
            checkchildgrid.attr('checked', false);
        }    
    });        
</script>

这是层次结构网格代码....

and this is hierarchy grid code ....

    @model IEnumerable<Topco.TopMapp.MVC.Models.CostPageSearch>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{ 
   @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>()
        .Name("Gridparent")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input id='chqprnt' class= 'chkbxq' type='checkbox'/>").Width(30);
            columns.Bound(e => e.CostPage).Width(100);
            columns.Bound(e => e.Description).Width(100);
            columns.Bound(e => e.VendorName).Width(100);
            columns.Bound(e => e.BillTypeDirect).Width(100);
            columns.Bound(e => e.BillTypeWarehouse).Width(100);
            columns.Bound(e => e.VendorName).Width(100);

        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("client-template")
        .HtmlAttributes(new { style = "height:480px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "CostPageDisplay"))
        )
        .Events(events => events.DataBound("dataBound"))
)
    <script id="client-template" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.ItemsDescriptionModel>()
            .Name("grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' />").Width(30);
                columns.Bound(o => o.ItemId).Width(100);
                columns.Bound(o => o.ItemDescription).Width(100);
                columns.Bound(o => o.BrandCode).Width(100);
                columns.Bound(o => o.PackSize).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
               .Read(read => read.Action("HierarchyBinding_Orders", "CostPageDisplay" , new { employeeID = "#=CostPage#" }))
           )
           .Pageable()
           .Sortable()
           .ToClientTemplate()
   )
    </script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
        //alert('1');
    }
</script>

但是当我单击父网格中的复选框时，单击事件没有触发...

but when i click on the checkbox in parent grid the click event is not firing ...

请问有什么想法和解决方案可以解决我的问题吗?..

would any one pls suggest any ideas and solutions with this problem that would be very grateful to me.....

非常感谢...

:请问下面的图片是我放置该复选框的位置，然后单击该复选框不会触发事件...

EDIT : would you pls look at the image below that is where i placed the checkbox and clicking on that checkbox does not firing event ...

推荐答案

尝试一下，

 $('#Gridparent').on("click", ".chkbxq", function (e) {

       var selected = $(this).is(':checked');

        var grid = $("#grid12").data("kendoGrid");


        if (selected == true) {

            var check = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('[type="checkbox"]').attr('checked', true);
            var asd = check.is(':checked');
            alert(asd);
        }

        });

使用网格单击.

这篇关于复选框事件未使用jQuery触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！