Question

我的kendo网格包含列中的按钮

首先点击功能有效但当我在网格中应用过滤器或可排序时，点击不再起作用

这是我的代码

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

    // kindo grid initialization

    jQuery("#grid").kendoGrid({
        sortable : true,
        resizable : true,
        pageable : {
            pageSize : 7,
            messages : {
                display : "{0}-{1} de {2} demand",
                itemsPerPage : "demand by pages",
                empty : "There are no demand"
            }
        },
        filterable : {
            extra : false,
            messages : {
                filter : "apply",
                clear : "delete",
                info : "Filter :"
            },
            operators : {
                string : {
                    eq : "equal",
                    neq : "not equal",
                    contains : "contains"
                }
            }
        }
    });

    // the input type button that i want to get the click handler 
    // work fine but when i apply filter on the grid it doesn't work any more
    // css class of the input is viewIcon

    jQuery(".viewIcon").click(function(){

        var idDT = this.id;

            jQuery("#consultation").hide().load("../dt/consultation/view.jsp",{id:idDT},function( response, status, xhr ) {

                 // some work
            });

        });
});
</script>
</head>
<title>table</title>
<body >

<div id="bord">
    <table id="grid"  style="width: 98%">
        <colgroup>
            <col/><col style="width: 60px" /><col/><col/><col/><col/><col/>
        </colgroup>
        <thead>
            <tr>
                <th>Numéro d'affaire</th>
                <th>Type</th>
                <th>Etat</th>
                <th>Demandeur</th>
                <th>Responsable projet</th>
                <th>Date de réception</th>
                <th>Actions</th>
            </tr>
        </thead>

        <%--  i get data from an sql query recordset  --%>

        <c:forEach var="dt_r" items="${recordset.rows}">
            <tr>
                <td style="text-align: center">${dt_r.n_aff_proj}</td>
                <td align="center">DT</td>
                <td align="center">${dt_r.etat_dem}</td>
                <td align="center">${dt_r.nom_dem}</td>
                <td align="center">${dt_r.resp_pro}</td>
                <fmt:formatDate var="fmt_date_reception_demande"
                    value="${dt_r.dat_r_d}" pattern="dd/MM/yyyy" />
                <td align="center">${fmt_date_reception_demande}</td>
                <td align="center">
                    <div class="actions">
                        <%--  the actions  --%>

                             <input type="button" title="Consulter DT" class="viewIcon" id="${dt_r.id_dt}" />

                    </div>
            </tr>
        </c:forEach>
    </table>
</div >

<div id="consultation">
</div>
</body>
</html>

请帮助

此处是JSFiddle上的链接here

Answer 1

您应该将.delegate()用于动态创建的元素。

.delegate（）为所有元素的一个或多个事件附加处理程序根据特定集合，现在或将来匹配选择器根元素。 more

jQuery('#bord').on('click', '.viewIcon', function() {
    alert("yess");          
});

jsfiddle

在kendo网格中应用过滤器后，jQuery单击按钮不起作用

1 个答案: