How to Call an Event from Html Css and Jquery

Question

I am trying to call the event from button through css. It not working. When i click the delete button the listed file need to be removed from list.

i couldn't able to place the input type also. I am trying to get multiple fileupload similar like gmail add and delete. Anyone help on this

<style>
        table {
            border-collapse: separate;
            border-spacing: 0 3px;
        }
        tr:nth-child(1n) {
            border: 2px solid;
            background-color: #eceff1;
            color: Black;
        }
        tr:nth-child(2n) {
            border: 2px solid;
            color: Black;
        }
        td {
            padding-top: .5em;
            padding-left:.5em;
            padding-right:.5em;
            padding-bottom: .5em;
        }

        input[type="file"] {
            display: none;
        }
        .label1 {
            padding: 3px;
            background: #fff;
            display: table;
            color:black;
        }
        button {
            background-image: url('../../Images/delete.ico');
            background-size: cover;
            padding-right:0px;
            background-color: Transparent;
            cursor: pointer;
            border: none;
            width: 30px;
            height: 30px;
        }


    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert("clicked.");
            });
        });
    </script>
    <script>

        updateList = function () {
            var input = document.getElementById('fileUploader');
            var output = document.getElementById('divFiles');



            var HTML = "<table>";
            for (var i = 0; i < input.files.length; ++i)
            {
                HTML += "<tr><td>" + input.files.item(i).name + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
            }
            HTML += "</table>";
            output.innerHTML = HTML;


        }
    </script>

score 1 · Accepted Answer · answered Apr 20 '18 at 12:37

1

You need event delegation for dynamic created elements:

$(document).ready(function () {
   $(parent_element).on('click', "children_selector", function () {
       alert("clicked.");
   });
});

answered Apr 20 '18 at 12:37

Ele

33,468
7
37
75

its working thanking you so much – Kavitha Prabhu Apr 20 '18 at 12:49
i haved changed as you told $(document).ready(function () { $(document).on('click', "button", function () { alert("clicked."); }); }); – Kavitha Prabhu Apr 20 '18 at 12:50

How to Call an Event from Html Css and Jquery

1 Answers1