Sumon Bappi Sumon Bappi - 4 months ago 8
jQuery Question

Jquery on click function is not working multiple time by a class

I have some element where there is label which are given same class name. So when the label will be clicked the function should run. But it is only running 2 times and then not fire. I am disabling all the field in the parent div by clicking the label. I need it whenever it will be clicked. Can anyone please help me on this please? Here are my attempts below::

my view >>>

<div class="physicalExamTable">
<div class="col-md-12 noLeftPadding noRightPadding">
<div class="col-md-6 noLeftPadding">
<div class="form-inline topPaddingSmall">
<label class="testLabel btnColorInactive">CBC:</label>
%{--<a class="btn testLabel btnColorInactive">CBC:</a>--}%
</div>
</div>
</div>
<table class="table table-striped table-bordered" id="labCbcTbl" name="CBC:" activeStatus="0">
<thead>
<tr>
<th>WBC</th>
</tr>
</thead>
<tbody>
<tr>
<td><g:textField name="wbc" class="form-control"/></td>
</tr>
</tbody>
</table>
</div>

<div class="physicalExamTable">
<div class="col-md-12 noLeftPadding noRightPadding">
<div class="col-md-6 noLeftPadding">
<div class="form-inline topPaddingSmall">
<label class="btnColorInactive testLabel">Chemistry Panel:</label>
</div>
</div>
</div>
<table class="table table-striped table-bordered" id="labChemistryTbl1" name="Chemistry Panel 1:">
<thead>
<tr>
<th>Na</th>
</tr>
</thead>
<tbody>
<tr>
<td><g:textField name="na" class="form-control"/></td>
</tr>
</tbody>
</table>
</div>


My jquery >>>

$('#physicalExamDiv').on('click', 'label.testLabel', function() {
var parentDiv = $(this).closest('.physicalExamTable');
var currentLabel = $(this);
if (currentLabel.hasClass("btnColorInactive")) {
parentDiv.find("*").prop('disabled', false);
currentLabel.removeClass("btnColorInactive").addClass("btnColorActive");
parentDiv.find("table").attr("activeStatus", "1");
} else {
parentDiv.find("*").prop('disabled', true);
currentLabel.removeClass("btnColorActive").addClass("btnColorInactive");
parentDiv.find("table").attr("activeStatus", "0");
}
});


It is enabling the field one time, disabling the field one time. But after that is not firing. Can you please help?

Answer

It's not working for the third time as you are disabling the link:

parentDiv.find("*").prop('disabled', true);

Note: this is browser dependent.

Example:

https://jsfiddle.net/zgmbqv11/

<label>click</label>
$("label").click(function() { 
    alert("ok");
    $("label").prop("disabled", true)
})

The fiddle in IE11 gives one alert, in chrome it continues to work.

Comments