jquery click function not working for dynamically added fields

Question

I dynamically append some html code (contains input type checkbox) using jquery. the data showing perfectly with class and ids but when i tried to access those input tags (input type checkbox) by using jquery it is not happening. Why? and is there any solution?

My Html

<div id="divData"></div>

My Scripts

<script>
    function RollBackVehicles() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetData", "Controller")',
            async: false,
            data: { ID: 1235 },
            dataType: "json",
            success: function (d) {
                var c = "";
                for (var b = 0; b < d.length; b++) {
                    c += "<p> <input type='checkbox'class='clscheck' id='" + d[b].Id + "'/> <span>" + d[b].Value + "</span>"
                }
                $("#divdata").html(c);
            }
        });
    }
    $(".clscheck").change(function () {
        alert("Changed");
    });

</script>

Answer 1

try using this for on any new element added to dom , because you are adding dynamic elements to DOM

   $(document).ready(function () {
    var data="<p> <input type='checkbox'class='clscheck' id='checkData'/> <span>Test</span>";
    $("#divdata").html(data);
 });
   
   $("#divdata").on("change", ".clscheck", function(){
         alert("Changed");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divdata"></div>

Answer 2

Try with,

$(document).ready(function () {
     $(document).on('change','.clscheck', function () {
        alert("change");
     });
 });

Answer 3

Since you you element is dynamically added you need to use reference of static element. Your code might look like.

$("#divData").on('click', '.clscheck',function () {
    alert("Changed");
});

Answer 4

You have to use pure javascript event handler binding, as for any Dom object added dynamically after the document is loaded.

notation example:

object.addEventListener("change", myScript);