Question

在使用jQuery的Web应用程序中，我有以下代码：

$("input[type=checkbox]").on("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

只要用户单击复选框，此操作就会执行。

有必要通过在加载页面时调用此事件处理程序一次来正确初始化页面状态，这样它就可以完成更改开头已经存在的复选框所要做的任何事情。

如何简单地为所有匹配的元素调用添加的事件处理程序，而无需实际触发事件？在“点击”的情况下，这将修改复选框状态，从而破坏数据。

我当前的解决方法是：

$("input[type=checkbox]")
    .on("click change", function (event) {
        let isChecked = event.currentTarget.checked;
        // Do something
    })
    .change();

这将为多个事件添加事件处理程序，并且仅触发没有副作用的事件处理程序。但是我想限制事件处理程序的真正必要性。如果只能在元素上使用“点击”事件，则没有其他选择。另外，就我而言，只有元素被隐藏或显示，但是如果发生其他情况，则可能会发生两次。

在此示例伪代码中，我正在寻找onAndNow函数：

$("input[type=checkbox]").onAndNow("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

这是另一个不太理想且不完整的解决方案：

function onCheckboxClicked(event) {
    let isChecked = event.currentTarget.checked;
    // Do something
}
$("input[type=checkbox]").on("click", onCheckboxClicked);
onCheckboxClicked(???);

Answer 1

您可以使用以下代码在每个元素上触发功能：

function onCheckboxClicked(event) {
    if (event == 0) {
      console.log("onload")
    } else {
      console.log("event")
      // Do something
    }
    
    console.log($(this).prop('checked'))

}

// Event driven
$("input[type=checkbox]").on("click", onCheckboxClicked);

// Executed on load
$("input[type=checkbox]").each(onCheckboxClicked);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

注意：如您所见，您将无法通过onload传递事件，因此您必须为每种情况编写代码。但是，您可以使用$(this)访问该元素。

添加事件处理程序并立即调用一次

1 个答案: