Finding element in jquery on gridview asp.net mvc c#

Question

I'm rather new to web development so I'm using MVC with ASP.NET and I've got an hard time with jQuery and its functions. I'm using the Razor View Engine with ASP.NET MVC c# with devexpress controls if that helps.

Now this is my problem:

I got a View which has an @Html.Action('view','controller'); declared which links to a gridview.

On that gridview I got some clientside functions that presents a detail View when a row is selected and Enter is pressed on the keyboard.

Now the gridview I'm using has some automated search options by clicking in a textfield and typing in what you want to look for and press enter. I declared a value which holds a value if I'm searching or selecting a row and press enter.

So after that I got it to work that when I press enter in the search textfield it wont open the Detail View. But it performs a callback when searching. In which the gridview is newly created. Now I got the problem that my function doesn't find the element anymore after this callback on the GridView.

I tried using the .find function in jquery but that didn't help. Here are some snippets I tried:

(these are located in a $(document).ready function)

 $('#id').click(function () {
    // do something
 });

And the .find version:

 $('#gridview').find('#id').click(function () {
    // do  something
});

So basically I want to be able to find the element AFTER the gridview has been build again.

::EDIT:: The ID's on the textfields.click stay the same.

::EDIT2:: I've found a cheap and dirty solution by adding my current code inside the EndCallback clientsideevent of the devexpress gridview. But there must be a decent way to do this... But this also proves my previous edit, where the id's stay the same.

Answer 1

When you call a function that binds event handlers, such as .click(), on a jQuery object containing a set of elements, the event handler is bound to only those elements; it won't also apply to any elements that are subsequently created that match the selector. If you replace those elements, even if the new element has the same id, the event handler disappears along with it. There is a solution for this, however, and it's called event delegation.

The basic principle is that you bind an event handler to an element that won't be replaced, which will contain all of your elements that you want to trigger the event, and pass it an event type, a selector to match the elements to trigger the function for that event type, and a function to execute. In jQuery 1.7 or later, this is achieved using one of the variations of the .on() function:

$('#gridview').on('click', '#id', function(e) {
    // do something when the element with an id of 'id' is clicked on
});

Note that I've assumed your #gridview element is never replaced. If it is, choose another element that you can reference that contains the #gridview element. If all else fails, you can call it on the document itself.

For more information, take a look at the Direct and delegated events section in the jQuery documentation for .on().

If you're still using a version of jQuery prior to 1.7, you'll need to use the .delegate() function instead. It works in the same way, but the first two arguments (the event type and selector) are switched around:

$('#gridview').delegate('#id', 'click', function(e) {
    // do something when the element with an id of 'id' is clicked on
});

Answer 2

I assume the re-rendering of the grid view is done via ajax otherwise the jquery would still work. If these elements (ids) have been removed from the DOM then they will lose their bindings. You need to add the click event into the function that re-loads the gridview. You can put the bindings into a function and call this function when something gets re-loaded:

function BindGridView(){

$('#id').die().click(function () {
    // do  something
});

}

And then where your gridview is being rendered call this re-binding function

$.ajax({
        cache: true,
        type: 'post',
        url: "/view/RenderGridView",
        success: function (msg) {

            //render grid view then re-bind
            BindGridView();


        }
    });

You can also bind click events on the result of another click event

Answer 3

you have to bind on gridview, e.g.:

$('#gridview').on('click', 'class_or_id_selector', function(e) { /* your code here */ });

then all elements with the specific class or id created dynamically will be handled