javascript - 如果快速多次单击，jQuery 删除属性将不起作用

Question

我的页面上有一些复选框。通过 jQuery 更改功能，如果选中复选框，我将附加一个 div。如果未选中复选框，请删除该 div。如果点击速度慢，它工作正常。每当多次点击尝试快速发生时，它不会删除 div。它会多次附加 div。有人可以帮我解决这个问题吗？以下是我的尝试。

<script type="text/javascript">
$('#include_addon_checkbox_<?PHP echo $addon_ids; ?>').change(function(){
if($(this).is(':checked')){

    var summary_div = '<div class="sidebar_addon" id="sidebar_addon_<?PHP echo $addon_ids ?>"><div class="addon-content"><?PHP echo str_replace("_", " ", $addons_keys) ?><p><?PHP echo $addon_package_name; ?> <a href="javascript:;" data-toggle="modal" data-target="#myModal_<?PHP echo $addon_ids; ?>"><span>(more details)</span></a></p></div><div class="addon-price">$ <?PHP echo $addon_package_price; ?></span></div>';

    $('#addons_container').append(summary_div);
    $('#sidebar_addon_<?PHP echo $addon_ids ?>').hide().slideDown(750);
}
else {
    $('#sidebar_addon_<?PHP echo $addon_ids ?>').slideUp(750, function(){ $(this).remove(); });
}
});
</script>

Answer 1

我认为这与您的动画时间有关。您可以将动画时间限制为 200-300 毫秒。或者在动画结束之前禁用所有复选框。然后启用它们。