My function won't trigger onclick jquery

Question

I have an asp.net kendo grid and inside i have an element with a class. I want to replace this class with another by clicking on a link that i put on right side.

So i used jquery to do it but it's not seem to be working.. and inside the console of chrome i don't get any error. I've tried to put alert but it's not triggering.

If someone could help here is my jquery

function changetoOK() {
    grid.tbody.find("td").onclick(function (index) {
        if ($("a").hasClass('changeToOk'))
        {
            $(this).removeClass('customClassVerif');
            $(this).addClass('customClassOK');
        }            
    });
}

also i add to create a fake link with an html helper to put it inside my grid so i have this in the grid :

columns.Template(@<text></text>).ClientTemplate(@Html.EmptyLink("Passer à OK").ToHtmlString());

and this in a class

public static class MyHtmlExtensions
{
    public static MvcHtmlString EmptyLink(this HtmlHelper helper, string linkText)
    {
        var tag = new TagBuilder("a");
        tag.MergeAttribute("class", "changeToOK");
        tag.MergeAttribute("href", "javascript:void(0);");
        tag.SetInnerText(linkText);
        return MvcHtmlString.Create(tag.ToString());
    }
}

[EDIT]

I think it could be good to know. I've made some change inside my code first and here is some explenation.

I have an element inside the grid with a class and i want that class to change to another when i click my link.

Answer 1

I think the problem is because you try use 'onclick' method that doesn't work in jQuery.

Try use .on('click', function(index) ...

Answer 2

.onclick isn't a jquery method, try .click instead, like so:

function changetoOK() {
    grid.tbody.find("td").click(function (index) {
        if ($("a").hasClass('changeToOk'))
        {
            $(this).removeClass('changeToOk');
            $(this).addClass('customClassOK');
        }            
    });
}

This will bind the click event to the td elements, although bear in mind all the function you've provided will do is find all a elements and see if any of them has the class changeToOk . The only reason I mention this is because you're giving the click function an index that is then never used.

Answer 3

This will work as expected :

function changetoOK() {
    grid.tbody.find("td").on('click', function (event) {
        if ($("a").hasClass('changeToOk'))
        {
            $(this).removeClass('changeToOk');
            $(this).addClass('customClassOK');
        }            
    });
}

Answer 4

So for everyone that want to do the same as me, finaly find out how.

All you have to do is this :

$(document).on('click', '.changeToOK', function () {
    $(this).parent().parent().find('.verifyCell').removeClass('customClassVerif').addClass('customClassOK');
})

I added a second class to my first element and it works !

Thanks to everyone who tried to help me.