0

I have a table that renders a bunch of div and I need to edit one of the divs. I use a partialview to update and inject the output from the partialview back into the original div. Everything works fine except.. after the inject, none of the links in the partial view work. The ones either side (above and below) work fine, just the update one.

I've used Chrome/Inspect to look a the div (dvthisresponse) and it's ok. Just the links (hrefs) in it never ever fire again.

$(".saveresponseedit").click(function (e) {
    e.preventDefault();
    ...
    $.ajax({
        url: '/spaces/saveresponse',
        data: formData,
        enctype: 'multipart/form-data',
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {                     
            $('#dvthisresponse' + @Model.id).html('');
            $('#dvthisresponse' + @Model.id).html(response);
        },
        error: function (req, status, err) {
            $("div#spinner").fadeOut("fast");
            $('#modalerror .modal-body p').html(err);
            $('#modalerror').find('.modal').modal({
                show: true
            });
        }
    });

    //return false;

});

Any ideas? Pulling my hair out on this one. thanks

  • Here's the fix in case anyone needs it - You have to connect up any new elements added dynamically as a jquery .On event will only hook up with elements currently in the dom. Change the links from .On to something like $(document.body).on('click', '.editresponse', function (e) {... fixes the problem. –  Jul 22 '16 at 10:05
  • Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Liam Aug 18 '16 at 12:29

0 Answers0