Event bubbling problem

[sushanth009Member]

Hello Peter,

I have two images in one of the columns of my grid. There is a check box which when selected selects all the checkboxes in the grid.
Also there is a pdf imagewhich when clicked should open the pdf documents.

But my problem here is I am handling this in the ‘columnclick’ event. So I need to accomplish independent tasks when clicked on the different images. but because of bubbling I am not able to do so.

How can I accomplish calling different functions when clicking on different images. I tried using the click event for both the images, but that is not working and I had to use the columnclick event . Any insight on this will be helpful..

Thanks
Sushanth

[Peter StoevKeymaster]

Hi Sushanth,

The event.target property provides the clicked HTML element. If you have multiple elements in a column, you can set a class or id to them and then check the event.target’s class or id and implement your logic depending on the clicked element in the ‘columnclick’ event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

Hello Peter ,

I tried using the event.target property but no matter where I click inside the div , the same functions were being called irrespective of where it was clicked.. Can you give me a small snippet of how this has to be done..

There are two divs inside this column.. One div with class – pdf-image and second div with class checkbox-image.

I want to call two different functions when clicked on each div…

 $('#grid').on("columnclick", function(event) {
                if (event.args.column.text == "dummyCheck") {  // This makes sure columnClick works for only this column
                       
                }
});

Doing this I saw that the event.target’s class was always being jqx-grid and other wrapper classes. To access the div in which the divs were I did this

 $tar = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0]);

This gave me the div with pdf-image class div.

I tried doing this but was of no use..

$('#grid').on("columnclick", function(event) {
                if (event.args.column.text == "dummyCheck") {
                    $tar = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0]);
                    $tar1 = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[1]);
                    if ($tar.is('div.pdf-image')) {
                        alert('pdf Clicked');
                    }
                    if ($tar1.is('div.checkbox-image')) {
                        alert('Checkbox Clicked');
                    }
       }
});

But both functions are being called no matter where I clicked , because the condition what I wrote is always true..
Can you help with out with this.

Thanks
Sushanth

[Peter StoevKeymaster]

Hi Sushanth,

Here’s a different approach that selects the column elements and handles their click events.

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").bind('bindingcomplete', function () {
    $("#jqxgrid .jqx-grid-column-header").bind('click', function (event) {
        // get click location.
        var y = event.pageY;
        var x = event.pageX;
        // get clicked HTML element.
        var target = event.target;
    });
});
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

It tried doing it but was not able to pin point the exact boundaries of it.
Also once I made the iconscontainer class display:none , the click event seems to work.. I could handle the issue in that event itself.. Thanks for the input Peter.

Sushanth

[Author]

Posts