jQuery on click函数不能被一个类多次使用

x0fgdtte  于 2022-11-22  发布在  jQuery
关注(0)|答案(3)|浏览(178)

我 有 一些 元素 的 标签 被 赋予 了 相同 的 类名 。 所以 当 标签 被 点击 时 , 函数 应该 运行 。 但是 它 只 运行 了 2 次 , 然后 就 没有 触发 。 我 通过 点击 标签 禁用 了 父 div 中 的 所有 字段 。 我 需要 它 , 无论 何时 它 被 点击 。
以下 是 我 的 尝试 。
我 的 看法 :

<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>

中 的 每 一 个
我 的 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");
        }
    });

格式
它 是 启用 一 次 场 , 禁用 一 次 场 。 但 之后 就 不 发射 了 。

g6ll5ycj

g6ll5ycj1#

编辑:因为我误解了这个问题,所以我重写了答案。
这是因为您使用.prop函数将disabled属性设置为true或false。您应该使用.removeAttr('disabled')删除该属性。

$("#physicalExamDiv").on("click", "label.testLabel", function() {
    var parentDiv = $(this).closest('.physicalExamTable');
    var currentLabel = $(this);

    if (currentLabel.hasClass("btnColorInactive")) {
        parentDiv.find("*").removeAttr("disabled");
        currentLabel.removeClass("btnColorInactive").addClass("btnColorActive");
        parentDiv.find("table").attr("activeStatus", "1");
    } else {
        parentDiv.find("*").attr("disabled", true);
        currentLabel.removeClass("btnColorActive").addClass("btnColorInactive");
        parentDiv.find("table").attr("activeStatus", "0");
    }
});
dgjrabp2

dgjrabp22#

由于 您 正在 禁用 链接 , 因此 第 三 次 无法 正常 工作 :

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

中 的 每 一 个

    • 注意 * * : 这 取决 于 浏览 器 。

示例 :
https://jsfiddle.net/zgmbqv11/ 的 最 大 值

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

格式
IE11 中 的 小 提琴 发出 一 个 警报 , 在 铬 合金 中 它 继续 工作 。

raogr8fs

raogr8fs3#

freedomn-m的想法对我很有效。我添加了parentDiv.find("label").prop('disabled', false)这一行,如下所示:

$('#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");
        }
        parentDiv.find("label").prop('disabled', false);
    });

相关问题