Question

i am following this http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgrid/checkboxcolumn.htm what i wanna do is that i am trying to capture change on checkbox so far i have done this something like this but following dont trigger any thing can some tell me what i am missing here

jQuery('#jqxgrid').find('span').on("click",function() {
                    alert('i am here');
                });

jQuery('#jqxgrid').on("click",function() {
                        alert('This works but when i try to click on <span> that holds checkbox, it dont alert any thing other then this it works');
                    });

and my HTML is simply as follows

<body class='default'>
        <div id="jqxgrid"></div>
    </body>
Was it helpful?

Solution

Try to use event delegation if your elements have been added dynamically:

$('body').on('click', '#jqxgrid span', function() {
    alert('i am here');
});

As per comment, you can use .find():

jQuery('#jqxgrid').on("click", function() {                 
    var span = jQuery(this).find('.jqx-checkbox-check-checked');
});

OTHER TIPS

I use this.

//=======> First I Define my element in the Jqxgrid, in my case one button...

myDataTable = $('#jqxgrid').DataTable({
            data: dataSet,
            columns: [
                      {
                          render: function ()
                          {
                              return '<button type="button" id="btnTest"></button>';
                          },
                          width: 50
                      },
                   .
                   .
                   .
                   .


//=======>Then, I catch the event 

   $('#jqxgrid tbody').on('click', '#AddTransportistas', function ()
        { alert('I am here'); 
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top