How to call JQuery actions on formatted HTML created after AJAX call?
Question
I make an AJAX call to a PHP file, and then create formatted HTML if the data was successfully retrieved.
//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 />");
}
}
The resulting HTML will look something like this:
<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>
What I want to do is grab the value of one of the newly created check boxes once it's clicked, but whenever I try to do it nothing happens.
This is what I'm trying to call:
$(".date").on("click", function(){
console.log(this.value);
});
Is it because the HTML is created after an AJAX call that you can't use an "on click" event?
4 answers
solution1
3 ACCPTED 2018-10-12 05:56:00
You can use it as
$("body").on("click", '.date', function(){
console.log(this.value);
});
Which can bind the click function on 'date' class whenever it is created in DOM.
solution2
1 2018-10-12 07:09:38
- for( var i = 0; i <= data.length; i++) { ==> for( var i = 0; i < 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>
solution3
0 2018-10-12 06:03:35
Works Fine with me.
You have to use $('body')
$('body') actually selects the element by the tag name
$("#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>
solution4
0 2018-10-12 07:00:10
When an element is created dynamically, any predefined event does not get attached to it. hence required to register event listener on parent element, like below.
$("body").on("click", '.date', function(event) {
alert( $(event.currentTarget).attr('value'));
});
second parameter for on is the target on which you want to trigger event(dynamically created element's class).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.