-1

I have html-code for beautiful checbox witch:

<div id="cbtestb"></div>

And also javascript code, w want to use in ajax reloading. Why it doesn't work:

$(document).ready(function () {
    $('#cbtestb').html('<input type="checkbox" checked="checked" id="cbtest" data-toggle="switch" />');
});

..but works well such code:

$('#cbtestb').html('<input type="checkbox" checked="checked" id="cbtest" data-toggle="switch" />');
$(document).ready(function () {
});

Thank you

user2301515
  • 4,903
  • 6
  • 30
  • 46
  • Which browser are you using? I've just tested and it works fine. – Malcor May 17 '18 at 08:26
  • The code that you have posted does not cause the problem that you are describing. As long as your javascript code is below the `div`, both examples will work. What exactly is the problem here? What do you mean by *beautiful*. Is there more `jquery` that adds styling to the checkbox? – Ted May 17 '18 at 08:30

1 Answers1

2

You have spelled your selector wrong in the document load example.

$('#cbtestb') is different than $('#cbtestbs')

If the example outside the document load is working then use that selctor. 

$(document).ready(function () {
    $('#cbtestbs').html('<input type="checkbox" checked="checked" id="cbtest" data-toggle="switch" />');
});

Edit

I can confirm that the following code works. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>

<body>
    <div id="cbtestb"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            $('#cbtestb').html('<input type="checkbox" checked="checked" id="cbtest" data-toggle="switch" />');
        });
    </script>

</body>
</html>
Malcor
  • 2,667
  • 21
  • 29