jQuery trigger asp.net radiobutton click inside of update panel

Question

I have some code where the user selects a 'Package' which is highlighted via jquery. How can i cause the asp radiobutton in this div to be clicked and perform its `OnCheckChanged' event?

$(document).ready(function () {
        $(".package-container").click(function (event) {
            $(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
            $(this).closest('.radio-group-row').find('.package-footer').removeClass('highlight');
            $(this).find('input:radio').prop('checked', true).click();
            $(this).find('.package-title').addClass('highlight');
            $(this).find('.package-footer').addClass('highlight');
        });
    });

I have tried this code using the onclick() method but it continually loads the page inside of the network tab in chrome is keeps posting the page and eventually lags out without a refresh.

My radiobutton in question is this:

<EclipseUI:CustomRadioButton runat="server" ID="RadioButton_Item" ClientIDMode="AutoID" ToolTip='<%# Eval("SystemValue") %>' GroupName="Package" OnCheckedChanged="RadioButton_Package_OnCheckedChanged" AutoPostBack="True"/>

How can i make jquery perform the oncheckedchange event of this radiobutton?

Edit

$(document).ready(function () {
        $(".package-container").click(function (event) {
            $(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
            $(this).closest('.radio-group-row').find('.package-footer').removeClass('highlight');
            $(this).find('input:radio').prop('checked', true).click();
            $(this).find('.package-title').addClass('highlight');
            $(this).find('.package-footer').addClass('highlight');
        });
    });



    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function (event) {
        var currPackage = $("#HF_Package").val();

        $("#" + currPackage).closest('.radio-group-row').find('.package-title').removeClass('highlight');
        $("#" + currPackage).closest('.radio-group-row').find('.package-footer').removeClass('highlight');
        $("#" + currPackage).find('input:radio').prop('checked', true);
        $("#" + currPackage).find('.package-title').addClass('highlight');
        $("#" + currPackage).find('.package-footer').addClass('highlight');
    });

My full jquery code looks like this. The latter part is for the postback to ensure their selected package is highlighted, i get this value from a hidden field and find the div of this value which is the package.

Answer 1

in update panel your DOM elements are replaced with content returned from async postback so event binding is reset.

you need to attach event handlers on 2 events :

(function($){ 

  var bindEvents =  function(){
   // bind events here;
  };

  // initial load
  $(document).ready( bindEvents);

  // every async load by update panel
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindEvents);

})(jQuery);  

for triggering postback, try adding button (you can hide it with css (disply:none) if you don't to display it) then add that button as updatepanel async trigger and call _dopostback and pass that button id

__doPostBack('<%= TheButton.ClientID %>', '');