Question

我遇到了这个问题，在我使用XML文件中的一些新值重建HTML页面后，我的JS函数将无法运行/运行。为了不使这篇文章太长，我在jsfiddle中收集了HTML / CSS：http://jsfiddle.net/qua1ity/g91xpfhx/（我不完全正常，因为我不知道如何向jsfiddle添加xml / ajax内容）

基本上，有一个图像和一个复选框，当选中复选框时，图像将获得不透明度值为1的类“markedImg”。当我尝试使用以下值重建html时这不起作用一个XML文件。

我这样做的请求是：

function doRequest(target) {
    if (XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if (ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        return false;
    }
    request.open("GET", target, true);
    request.send(null);
    request.onreadystatechange = function () {
        if ((request.readyState === 4) && (request.status === 200)) {
            createHTML(request.responseXML);
        }
    };
}

从addeventlistener

发送“target”参数

categoryMenu.addEventListener("change", function () {
    if (categoryMenu.value === "Flower") {
        doRequest("categories/imgcat0.xml");
    }
    if (categoryMenu.value === "Buttefly") {
        doRequest("categories/imgcat1.xml");
    }
});

然后我运行“createHTML”函数，它使用XML文件中的值重建html

function createHTML (XMLcode) {
var imgURL = XMLcode.getElementsByTagName("image");
var title = XMLcode.querySelector("title");
var html = "";
imgForm.innerHTML = "";

html += '<h3>' + title.firstChild.data + '</h3>';

for (var i = 0; i < imgURL.length; i++) {
    html += '<div class="outerBox">';
    html += '<label><input type="checkbox" align="middle"><img src="' + imgURL[i].children[0].childNodes[0].nodeValue + '" alt="img 1" class="unmarkedImg"></label>';
    html += '<div class="innerBox">';
    html += '</div>';
    html += '</div>';
}
imgForm.innerHTML = html;
}

到目前为止一切正常，但是当我添加添加“markedImg”类的函数时，它不会在新创建的HTML元素上运行。基本上这个功能没有任何反应。函数本身可以工作，您可以在jsfiddle示例中看到，但是在您更改类别并且“doRequest”函数运行后它不起作用。

checks.forEach(function (checkbox, index) {
checkbox.onchange = function () {
    if (this.checked) {
        unmarkedImg[index].classList.add("markedImg");
    } else {
        unmarkedImg[index].classList.remove("markedImg");
    }
};
});

XML非常简单，只是图像的标题和来源：

<imagecategory>
    <title>Butterfly</title>
    <image>
        <url>http://i.imgur.com/LY1Mq8k.jpg</url>
    </image>
</imagecategory>

对不起，如果帖子有点长..希望这对某人有意义。谢谢！

ajax和JavaScript函数的问题

0 个答案: