Fault/Doubt event change jquery

Question

Hello,

I’m having a little problem with a checkbox. When the checkbox becomes true, two fields must be visible (by default these fields are invisible), otherwise the fields are invisible. The checkbox works normally, but if I close the modal and open it again, the jquery function stops working, that is, when I change the values of this checkbox, the fields are not visible.

Follow my HTML and jquery functions. Prints below:

function visibleClass() {

   $("#div_responsavel, #div_grau").removeClass("row not-
   visible").addClass("row");

}
function invisibleClass() {

   $("#div_responsavel, #div_grau").removeClass("row").addClass("row not-
   visible");

}

//Function that is executed when the checkbox is changed

$("#cbx_responsavel").on("change", function () {

    if ($('#cbx_responsavel').is(':checked')) {
    visibleClass();
}
else {
    invisibleClass();
}
});

//Este é o checkbox

<div class="row">
    <div class="form-group col-md-12">
        <label class="col-md-4 control-label">Possui Responsável *</label>
        <div class="form-group col-md-3 col-md-offset-3">
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="cbx_responsavel">
                <label class="onoffswitch-label" for="cbx_responsavel">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                </label>
            </div>
        </div>
    </div>
</div>

//segue os dois campos, class not-visible (css com display none)
//html produzido com helpers do asp.net[![inserir a descrição da imagem aqui][1]][1]

<div class="row not-visible" id="div_responsavel">
    <div class="form-group col-md-12">
        @Html.Label("txt_responsavel", "Nome Responsável", new { @class = "col-md-4 control-label" })
        <div class="form-group col-md-12">
            @Html.TextBox("txt_responsavel", null, new { @class = "form-control" })
        </div>
    </div>
</div>
<div class="row not-visible" id="div_grau">
    <div class="form-group col-md-12">
        @Html.Label("enum_parentesco", "Grau Parentesco", new { @class = "col-md-4 control-label" })
        <div class="form-group col-md-5">
            @Html.DropDownList("DropDownGrauParentesco", null, "Selecione uma opção", new { @class = "form-control" })
        </div>
    </div>
</div>

Answer 1

What happens is that when the modal is closed, the checkbox Systems are removed. One way around this is to listen to the modal event when it is opened and only then instantiate the listening of the checkbox and its actions.

Turn your listening into a function, at the beginning of the code call it cbx_responsavel(), then listen to the modal opening event, when opened, call it again.

function cbx_responsavel(){

    // Remove o evento, garanti que não será duplicado
    $("#cbx_responsavel").unbind('change');

    $("#cbx_responsavel").on("change", function (){
        if ($('#cbx_responsavel').is(':checked'))
        {
            visibleClass();
        }
        else
        {
            invisibleClass();
        }
    });
}

Answer 2

As Bruno said, closing the modal is removing the events from the generated html element. Another suggestion for resolving it would be:

$(document).ready(function(){ 
     $(document).on("change", "#cbx_responsavel", function(){
         ... seu código
     });
});

This way, you are linking the event to the document’s HTML element, which will persist while the document is active.