Failure / Doubt change jquery event

Question

Failure / Doubt change jquery event

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Hello,

I'm having a little problem with a checkbox. When the checkbox is true, two fields should be visible (by default these fields are invisible), otherwise the fields will be 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>

javascript jquery html5

asked by anonymous 05.07.2017 / 02:42

2 answers

2

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

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

In this way, you are linking the event to the HTML element of the document, which will persist while the document is active.

05.07.2017 / 03:37

Catch only last query sql server query How to display images in the ListView from Firebase?

score 2 · Accepted Answer

What happens is that when the modal is closed, the checkbox listener is removed. One way to get around this is to listen for the modal event when it is opened and then instantiate the listener's listening and actions.

Turn your listener into a function, at the beginning of the code call it cbx_responsavel (), then listen for the modal opening event, when open, 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();
        }
    });
}