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 — Brave Soul
– Brave Soul, Commented Feb 2, 2017 at 9:04
Per Buttonclick this part will run throught ! so yes there will be more than one Checkbox ... what should i edit ? — Stefan Kaboom
– Stefan Kaboom, Commented Feb 2, 2017 at 9:07
Duplicate of http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements. — ibrahim mahrir
– ibrahim mahrir, Commented Feb 2, 2017 at 9:13

Satpal · Accepted Answer · 2017-02-02 09:10:05Z

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 2, 2017 at 9:10

answered Feb 2, 2017 at 9:08

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stefan Kaboom Over a year ago

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! !

Satpal Over a year ago

@StefanKaboom, You can manipulate checked property i.e. event.target.checked = false; to change its value $(event.target).val('ghhjhh')

Stefan Kaboom Over a year ago

The Problem is that the Event isnt firing ! How i change the property is 2nd Problem ... first the event has to trigger

Stefan Kaboom Over a year ago

The event is being triggered by nondynamic checkboxes !!! but not by dynamic ones !!

Satpal Over a year ago

@StefanKaboom, To verify that event is being triggered by nondynamic checkboxes, create couple of checkboxes without making the ajax call

|

Collectives™ on Stack Overflow

Create Click Event for Dynamic Checkboxes JS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related