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中创建click函数，都可以将其绑定到'date'类上。

Answer 2

for（var i = 0; i <= data.length; i ++）{==> for（var i = 0; i << / strong> data.length; i ++）{

input.attr（“ value”，data [ 0 ] ['date']）; ==> input.attr（“ value”，data [ i ] ['date']）;

label.append（“ data [ 0 ] ['date']”）; ==> label.append（`$ {data [i] ['date']}`）;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="checkboxes"></div> <script type="text/javascript"> //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[i]['date']); label.append(input); label.append(`${data[i]['date']}`); $('.checkboxes').append(label); $('.checkboxes').append('<br />'); } $(".date").on("click", function(){ console.log(this.value); }); } window.onload = setTimeout(createHTML([{'date': '2018-01-01'}, {'date': '2018-01-02'}]), 1000) </script> </body> </html>

Answer 3

和我一起工作很好。

您必须使用$('body')

$('body')实际上是通过标签名称选择元素的。

$("#showcheckbox").click(function(){
  $("#opDiv").html('<input type="checkbox" name="date[]" class="date" value="2018-01-01"> 2018-01-01');  
});

$("body").on("change", '.date', function(){
    
    alert(this.value);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span id="showcheckbox">Click me</span>
<br><br>
<div id = "opDiv"></div>

Answer 4

动态创建元素时，任何预定义事件都不会附加到该元素。因此需要在父元素上注册事件侦听器，如下所示。

$("body").on("click", '.date', function(event) {
    alert( $(event.currentTarget).attr('value'));
});

on的第二个参数是要触发事件的目标（动态创建的元素的类）。

如何在AJAX调用后创建的格式化HTML上调用JQuery操作？

4 个答案: