Home/ Questions/Q 8693849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:38:17+00:00

Possible Duplicate: jQuery click not working for dynamically created items $(document).ready(function(){ $(‘#btn’).click(function(){ var createInput=$(<input

  • 0

Possible Duplicate:
jQuery click not working for dynamically created items 

        $(document).ready(function(){
            $('#btn').click(function(){

                var createInput=$("<input type='button'>");
                createInput.attr("id","close1");
                createInput.attr("value","close");
                $('#outer-div').append(createInput);
            });

            $("#close1").click(function(){
                alert('hi');
            });
        });


    </script>
</head>
<body>
    <div id='outer-div'>
        <input id='btn' type='button' value='click here'/>
    </div>

What’s wrong with the code. I am not getting the alert when i click the dynamically generated button named as close. Please help it out

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This would work :

        $(document).ready(function(){
        $('#btn').click(function(){

            var createInput=$("<input type='button'>");
            createInput.attr("id","close1");
            createInput.attr("value","close");
            $('#outer-div').append(createInput);
        });

        $(document).on('click', "#close1", function(){
            alert('hi');
        });
    });

    The problem with 

    $("#close1").click...

    is that it adds an event handler to nothing, as the collection is empty when you execute this line. The on function fixes that.

    BTW, it’s recommended to put your script at the end of the body instead of in the head.

    • 0