当用户选中复选框时追加按钮，反之亦然

Question

这里有一个输入字段。它从ajax响应返回，然后追加到另一个div。现在，我希望当用户在任何复选框上单击一个按钮时，一些数据将被附加到一个特定的div。

<input name="new" onclick="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '"  data-toggle="toggle">

这是我想要追加按钮的div。

<div id="setBgColor" class="px-1 py-1 shadow"
style="height: 600px;width: 320px;position: relative;border: solid black 15px;
border-radius: 24px; background-color: #7ecff4;margin-top: -70px;">

首先，我尝试了自定义函数，但它不能正常工作。

function showButton() {
    $('#setBgColor').html('<div><button type="button" class="btn btn-sm btn-block btn-primary"> </button></div>');
}

然后我尝试了这个jquery代码，但是它也什么都不做。

$('#switchButton').on('click').each(function(){
        $('#setBgColor').html('<div><button type="button" ckass="btn btn-sm btn-block btn-primary"> </button></div>');
    });

Answer 1

您不需要使用jQuery定义事件。将输入标记上的onclick替换为onchange

因为我们使用的是checkbox，所以我们需要使用onchange事件

你能试一下吗

<input name="new" onchange="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '"  data-toggle="toggle">