Question

我发现我需要创建一个单击动态复选框的事件...我找到了100个解决方案，但没有一个工作..我发布了我的想法如何解决这个问题我得到... 愿有人纠正我吗？

注意：我使用An Ajax函数执行php脚本

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
});

编辑：

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'));
            });

调用功能：

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

动态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);

Answer 1

当您使用Event Delegation时只绑定事件处理程序一次，然后event.target可用于获取启动事件的DOM元素。然后可以使用它的各种属性，如checked。

＆＃13;

$(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)

＆＃13;

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

＆＃13;

注意：代替document，您应该使用最接近的静态容器以获得更好的性能

为Dynamic Checkboxes JS创建Click事件

1 个答案: