javascript - 如何对 AJAX 调用后创建的格式化 HTML 调用 JQuery 操作？

Question

我对 PHP 文件进行 AJAX 调用，然后在成功检索数据时创建格式化的 HTML。

//Function called after AJAX success
function createHTML(data) {
    for( var i = 0; i <= data.length; i++) {
        var label = $("<label>").addClass("checkbox-inline");

        var input = $("<input>").attr("type", "checkbox");
        input.attr("name", "date[]");
        input.attr("class", "date");
        input.attr("value", data[0]['date']);
        label.append(input);
        label.append("data[0]['date']");

        $(".checkboxes").append(label);
        $(".checkboxes").append("<br />");
    }
}

生成的 HTML 将如下所示:

 <div class="checkboxes">
    <label class="checkbox-inline">
        <input type="checkbox" name="date[]" class="date" value="2018-01- 
        01">2018-01-01
    </label>
    <br />
    <label class="checkbox-inline">
        <input type="checkbox" name="date[]" class="date" value="2018-01- 
        02">2018-01-02
    </label>
    <br />
  </div>

我想要做的是在单击新创建的复选框之一后获取其值，但每当我尝试执行此操作时，都不会发生任何事情。

这就是我想要调用的:

$(".date").on("click", function(){
    console.log(this.value);
});

是否因为 HTML 是在 AJAX 调用后创建的，所以您无法使用“单击”事件？

Answer 1

您可以将其用作

$("body").on("click", '.date', function(){
    console.log(this.value);
});

每当在 DOM 中创建“date”类时，它都可以将点击函数绑定(bind)到“date”类上。