C# MVC Razor: Javascript binding to a partial view

Question

Previous question for context: C# MVC 5 Razor: Updating a partial view with Ajax fails

Now that I have successfully managed to refresh my partial view, I find myself having another difficulty which I don't really know how to deal with. You see, the table I am displaying also displays two buttons per line :

    <td class="noWrap width1percent tri">
        <input type="button" value="Valider" id="Valider_@i" data-valid=data />
        <input type="button" value="Rejeter" id="Rejeter_@i" data-reject=data />
    </td>

That's a "validate" button and a "rejection" button. Basically, each line can either be "approved" or "rejected", and the user uses those buttons to make a decision for each line. The actions are bound to a Javascript script, put on top of the main view, which looks like this:

$(function () {
    $('*[data-valid]')
        .click(function () {
            // Get values of fields
            $("#divLoading").show();
            var idOfField = this.id;
            var data = document.getElementById(idOfField).dataset.valid;
            // Partially censored code
            // Now that we have the values of all fields we need to use a confirmation message
            var result = confirm("OK?")
            if (result == true) {
                // The user chose to validate the data. We have to treat it.
                validateResults(data);
            }
            else {
                $("#divLoading").hide();
            }
        })

ValidateResults:

function validateResults(data) {
    $.ajax({
        url: '@Url.Action("ValidateControl", "Article")',
        type: "POST",
        data: { data:data},
        success: function (result) {
            $("#tableControl").html(result);
            $("#divLoading").hide();
        }
    });
}

A similar function exists for the rejection button.

Now, before successfully managing to refresh my Partial View, this worked fine. However, now that the refreshing works, clicking the buttons after refresh doesn't work. I believe this is because the Javascript action isn't bound to the buttons once more after the refresh event is done!

How can I make sure that my Javascript actions, in the main view, are bound to the buttons which are generated in the partial view?

Please note that I tried to put the portion of the main view in the partial view, instead. This makes sure that the actions are bound once again, but completely kills the CSS after refresh, which isn't a desirable outcome either!

Answer 1

Since you are essentially replacing the body of the table, you will need to re-wire the events if you do it the way you are doing it. You can also hook the event up to the parent tbody:

$(document).ready(function(){
    $("#tableControl").on("click","*[data-valid]", function(){
          ....
    });
});

I haven't tested the above but something like that should work. Or, just re-wire the events on the buttons after the partial view is refreshed on the page.