Create Click Event for Dynamic Checkboxes JS

Question

I found out that i need to create an event for clicking dynamic checkboxes ... i found 100 solutions but none of them worked .. i'll post my idea how to solve this problem i got... May someone correct me ?

Notice: Im using An Ajax function for executing an php script

var input = document.createElement("input");

input.setAttribute("type", "checkbox");
input.name = id;
input.id = id;
input.checked = "checked";
input.className = "checkboxclass"

//... adding some other things

$(document).on('change', '[type=checkbox]', function () {
    alert('clicked'); // here i want to change if checked or unchecked
});

EDIT:

function myAjax() {
    $.ajax({
        type: 'POST',
        data: {
            tbxQuestion: document.getElementById("tbxQuestion").value
        },
        url: '/evaluation/func/createOwnQuestion.php', // <=== CALL THE PHP FUNCTION HERE.
        success: function (data) {
            if (data != 'Fehler') {
                var array = data.split(':');
                var id = array[0];
                var name = array[1];
                name = document.createTextNode(name);

                if (!document.getElementById("ul")) {
                    var ul = document.createElement("ul");

                    ul.className = "collection with-header";

                    ul.id = "ul";

                    var lih = document.createElement("li");

                    lih.className = "collection-header";

                    var h = document.createElement("h4");

                    h.appendChild(document.createTextNode("Eigene Fragen"));

                    lih.appendChild(h);
                    ul.appendChild(lih);

                    document.getElementById("inputhidden").appendChild(ul);

                } else {
                    var ul = document.getElementById("ul");
                }

                var li = document.createElement("li");

                li.className = "collection-item";

                var input = document.createElement("input");

                input.setAttribute("type", "checkbox");
                input.name = id;
                input.id = id;
                input.checked = "checked";
                input.className = "checkboxclass"

                    var label = document.createElement("label");

                label.for  = id;

            label.appendChild(name);

            li.appendChild(input);

            li.appendChild(label);

            ul.appendChild(li);

            Materialize.toast('Frage erfolgreich hinzugefügt!', 4000);
        } else {
            Materialize.toast('Fehler beim speichern der Frage ... Probier es später nochmal!', 4000);

        }

    },
    error: function (xhr) {
        alert("Fehler! CALL ADMIN!");
    }
});
}
 $(document).on('change', '[type=checkbox]', function (event) {
                console.log(event.target.id + ' is ' + (event.target.checked ? 'checked' : 'unchecked'));
            });

Calling Function:

                                <button id="erstellen" class="btn waves-effect waves-light" type="button" name="erstellen" onclick="myAjax(); return false;">Erstellen
                                <i class="material-icons right">send</i>
                            </button>

Dynamic testcheckbox

    var testchkbox = document.createElement("input");

testchkbox.setAttribute("type", "checkbox");
testchkbox.name = 12;
testchkbox.id = 12;
testchkbox.checked = "checked";
testchkbox.className = "checkboxclass"

    var labeltest = document.createElement("label");

    labeltest.for = 12;

    labeltest.appendChild(document.createTextNode("test"));


document.getElementById("inputhidden").appendChild(testchkbox);
document.getElementById("inputhidden").appendChild(labeltest);

if you have other checkboxes apart from these hen this will create problem — Ameya Deshpande, Feb 02 '17 at 09:04
Per Buttonclick this part will run throught ! so yes there will be more than one Checkbox ... what should i edit ? — Stefan Kaboom, Feb 02 '17 at 09:07
Duplicate of [http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements). — ibrahim mahrir, Feb 02 '17 at 09:13

Satpal · Answer 1 · 2017-02-02T09:10:05.410

3

As you are using Event Delegation just bind event handler once, then event.target can be used to get the DOM element which initiated the event. Then its various properties can be used like checked.

$(document).on('change', '[type=checkbox]', function (event) {
    console.log(event.target.id + ' is ' + (event.target.checked ? 'checked' : 'unchecked')); 
});

var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.id='checkbox1';
input.checked = true;
input.className = "checkboxclass"
$(document.body).append(input)


var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.id='checkbox2';
input.checked = true;
input.className = "checkboxclass"
$(document.body).append(input)

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

Note: In place of document you should use closest static container for better performance

edited Feb 02 '17 at 09:10

answered Feb 02 '17 at 09:08

Satpal

132,252
13
159
168

I got the ajax script already implemented! EDIT: The Input-element is already appended too. THe Checkbox is Visible as Checked but i cant change the value! ! – Stefan Kaboom Feb 02 '17 at 09:09
@StefanKaboom, You can manipulate `checked` property i.e. `event.target.checked = false;` to change its value `$(event.target).val('ghhjhh')` – Satpal Feb 02 '17 at 09:14
The Problem is that the Event isnt firing ! How i change the property is 2nd Problem ... first the event has to trigger – Stefan Kaboom Feb 02 '17 at 09:17
The event is being triggered by nondynamic checkboxes !!! but not by dynamic ones !! – Stefan Kaboom Feb 02 '17 at 10:40
@StefanKaboom, To verify that event is being triggered by nondynamic checkboxes, create couple of checkboxes without making the ajax call – Satpal Feb 02 '17 at 10:43
See Post: Normal Checkboxes triggers the event but the test one doesnt – Stefan Kaboom Feb 02 '17 at 10:51

Create Click Event for Dynamic Checkboxes JS

1 Answers1