JQuery

Event not firing after JQuery ajax method call

Event not firing after JQuery ajax method call, someone asked me to explain?

After dynamically bind the content into div a element using JQuery ajax method, the event is not firing.


In this example I will show you how to resolve this problem. Here I used to bind content dynamically with collapsible panel. I used the icon for expanding collapse of that you should write code and keep it in a jQuery function called expandcollapse. Initially on page load I  called the expandcollapse function on document.ready. It works fine on pageLoad. But after the dynamic content bind on div element, the jQuery event is not working. So that I  added the following  document.ajaxstop and call the jQuery function expandcollapse,  finally it works fine.

<style type="text/css">
.custom-plus {
        background-image: url(Content/themes/base/images/openclose.png);
        background-repeat: no-repeat;
        padding-top: 6px;
        padding-left: 29px;
        background-position: 0px -58px;
    }

    .custom-minus {
        background-image: url(Content/themes/base/images/openclose.png);
        background-repeat: no-repeat;
        padding-top: 6px;
        padding-left: 29px;
        background-position: 0px 0px;
    }

</style>

<script type="text/javascript">
 $(document).ajaxStop(function () {
        expandcollapse();
    });

function expandcollapse () {
$('.collapse').on('shown.bs.collapse', function (e) {
$(this).parent().find(".custom-plus").removeClass("custom-plus").addClass("custom-minus");
        }).on('hidden.bs.collapse', function () {
             $(this).parent().find(".custom-minus").removeClass("custom-minus").addClass("custom-plus");
        });
}
function GetData() {
         $.ajax({
type: 'GET',
url: '/Home/GetData',
data: {},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (response) {
                   if (response != null) {                        var html = response.view;                        $(html).hide().appendTo("#pubcontent").fadeIn(1000);                    }                },   error: function () {                    alert("Errorwhile retrieving data!");              }
            });
        }
$(document).ready(function () {
 expandcollapse();
});

</script>

<a data-toggle="collapse" href="#collapse-@Model.SubmitId" class="button-show" title="play"> <span class="custom-plus"></span></a> 

<div id="collapse-@Model.SubmitId" class="panel-collapse collapse" > @Html.Raw(Model.Description)         </div>

Output:

Event not firing after JQuery ajax method call

Post your comments / questions