CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jamal Ejaz
Jamal Ejaz

Reputation: 33

jQuery remove attribute won't work if multiple clicks in fast speed

I have some check boxes on my page. Through jQuery change function I am appending a div if checkbox is checked. If checkbox is not checked remove that div. It works fine if clicks in slow speed. Whenever multiple click attempts happens in fast speed it don't remove the div. It keeps appending the div multiple time. Can someone please help me fix this? Following is my attempt.

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

Upvotes: 1

Views: 83

Answers (2)

soztrk
soztrk

Reputation: 303

I think it is about your animation timings. You can lover animation times to 200-300ms. Or disable all checkboxes until your animation has ended. Then enable them.

Upvotes: 1

jack wu
jack wu

Reputation: 321

maybe the php variable's problem. you can try this:

<script>
    var addon_ids = "<?PHP echo $addon_ids ?>";
    var content = .....;
    and so on......;
</script>
<script>
    $(function(){
       $('#include_addon_checkbox_'+addon_ids ).change(function(){
           add you code.
       })
    })
</script>

Before loading the page, the php variable assigned to the js variable. then jquery load it.

Upvotes: 1

Related Questions