Question

我正在使用xmlhttprequest获取'cars'数组，并为数组中的每个值动态创建锚标记。

现在我无法访问新创建的锚标签的innerhtml。

//script for getting array and creating anchor tags dynamically

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {      
var cars = JSON.parse(xmlhttp.responseText);
for (i = 0; i < cars.length; i++)
{
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href','#');
aTag.setAttribute('class','cl');
aTag.innerHTML = cars[i] + "<br>";
mydiv.appendChild(aTag);
}

}
};

xmlhttp.open("POST", "http://localhost:3000/welcomepage", true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send();


//script for accessing innerhtml of the above created anchor tags.

$('.cl').click(function(e) {
e.preventDefault();
var t = $(this).text();
alert(t);
}

Answer 1

使用$ .post而不是XMLHttp
使用委托In jQuery, how to attach events to dynamic html elements?
请注意我如何使用$ .each

//script for getting array and creating anchor tags dynamically
// not tested but should be ok depending on return values

$.post("http://localhost:3000/welcomepage", function(cars) {

  var $mydiv = $("#myDiv"),
    carHTML = [];
  $.each(cars, function(car) { // or function(_,car) - not clear from question
    carHTML.push($('<a/>', {
      'href': '#',
      'class': 'cl'
    }).html(car));
  });
  $mydiv.append(carHTML.join('<br/>'));
});

//script for accessing innerText of the above created anchor tags.

$("#myDiv").on("click", ".cl", function(e) {
  e.preventDefault();
  var t = $(this).text();
  alert(t);
});

访问动态创建的锚标记

1 个答案: