0

The following data is coming from an ajax response and then I've appended it to the DOM.

<label class="switch">  
<input name="new"  
    value=1 type="checkbox"  
    id="switchButton"  
    data-id="'+order.id+'"  
    data-toggle="toggle">  
<span class="slider round"></span>
    </label>

I used the follwoing method to sellect the checkbox value and toggle the state of the setButton div but it is not working. the jquery code is placed inside document ready function.

$('#switchButton').click(function(){
                $('#setButton').toggle();
            });

The div which i want to hide and show is as follow:

<div class="setButton" style="display: none;" id="setButton">
            <button type="button" name="button"></button>
</div>

Note: When I do the functionality in JavaScript it works but it misses some clicks, say once it is clicked the button will be displayed but when click again it doesn't hide it and when clicked again it will hide it.

Waheed Sindhani
  • 1
  • 3
  • Did you tried `$("#switchButton").live("click", function(){`? Possibly this is the issue: https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery – sachinkondana Aug 18 '20 at 06:37
  • yes it says live is not a function. I think it is deprecated alternative to live is on(). but on also doesn't work. – Waheed Sindhani Aug 18 '20 at 06:42
  • Try this `$('body').on('click', '#switchButton', function() { $('#setButton').hide(); });`. Took reference from link added in @MackMon's comment. – Karan Aug 18 '20 at 06:54

1 Answers1

0

Use hide method for e.g

$('#switchButton').click(function(){
            $('#setButton').hide();
        });
Pawan Bishnoi
  • 1,759
  • 8
  • 19