Question

我发现了一个很酷的模态css包，它允许你用css弹出窗口（我会分享链接，但如果那是'允许的话'，那就是idk）。我导出他们提供的内容并将其上传到我的网站，它完美无缺。所有不同的按钮按预期打开和关闭模态。所以我开始扩展它并尝试在（经典）asp页面上引入一个简单的javascript函数，该页面对一个返回字符串的不同asp页面进行ajax调用，该字符串也按预期工作。然后我希望有一个在ajax响应中创建的链接，该链接也可以作为页面上硬编码的元素，这是问题的来源。 ajax响应与实际页面上的按钮/链接具有相同的代码，但是当它们被点击时没有任何反应。

这是我的index.asp页面中的javascript：

function ajaxCall(qStr) {



if (qStr.length==0) {
    document.getElementById('outputDiv').innerHTML = "";
    return;
}

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById('outputDiv').innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","getHint.asp?which=2&q=" + qStr,true);
xmlhttp.send();


}

if (qStr.length==0) { document.getElementById('outputDiv').innerHTML = ""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('outputDiv').innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getHint.asp?which=2&q=" + qStr,true); xmlhttp.send();

这是调用ajaxCall函数的页面上的表单：

另一个页面（getHint.asp）在数据库中运行一个循环，以查找与表单中输入的字符串匹配的所有项目，这是有效的。这是该页面中最重要的一点：

<form>Client's Name: <input type="text" onkeyup="ajaxCall(this.value)" size="20"> </form> <div id="outputDiv"></div>

所以所有'结果'都连接起来并在循环结束时输出，这又一次有效。并且不要深入了解css起点的细节，但任何具有“md-close”类的对象都会关闭它所处的模态，但那部分不起作用。

我还需要做些什么来让页面识别来自ajax调用的响应并让它操纵页面吗？

我已经在getHint.asp页面上获取了代码并将其粘贴到index.asp页面，并且该链接可以正常工作。我使用了firebug，来自ajax调用的响应编码与页面上稍微低一点的链接相同，但唯一有效的是硬编码的。

哦，我把响应中的javascript警告放在“ajax响应链接点击”的响应中，当单击链接时它会起作用，但模态会保持打开状态。

感谢您的关注，任何指针都非常感激。

更新：根据评论中的要求，这是使用md-close类处理对象点击的javascript：

<form>Client's Name: <input type="text" onkeyup="ajaxCall(this.value)" size="20"> </form> <div id="outputDiv"></div>

leResult = leResult & "<a href=""#"" onClick=""alert('ajax response link clicked.');"" class=""md-close md-trigger"" data-modal=""clientSearch"" style=""color: #ffffff;"">" & rs.fields("name") & "</a>, "

leResult = leResult & "<a href=""#"" onClick=""alert('ajax response link clicked.');"" class=""md-close md-trigger"" data-modal=""clientSearch"" style=""color: #ffffff;"">" & rs.fields("name") & "</a>

Answer 1

您的问题是，当您将侦听事件绑定到具有类md-close的所有元素时，从JavaScript调用加载的元素尚不存在。随后，事件不会绑定到它们，并且当它们在AJAX调用之后创建时，它们的点击事件不会被触发 - 因为它们没有被绑定。

基本上 - 当您附加事件时，您只绑定到具有类md-close的所有现有元素，而不是将来可能存在的具有相同类的每个元素。

在将加载了AJAX的标记添加到页面之后，您需要重新运行代码以将listen事件附加到if (xmlhttp.readyState==4 && xmlhttp.status==200)块内的新元素。您必须小心不要将侦听器两次添加到现有标记中，但希望这个答案能够为您提供足够的信息来重构您的代码以实现您所追求的目标。

如果您想切换到jQuery，它可能会对整体有所帮助，但如果您对该库没有任何经验，那么您将不得不学习很多东西。你在jQuery中的类似情况是，你的类的普通点击处理程序将像这样完成（为了简单起见，创建一个新的.js文件命名你喜欢的任何东西并链接到你链接后到jQuery库本身）：

$(function() {
    $('.md-close').click(function() {
        console.log('close button clicked');
    });
});

这基本上可以让您在原始问题的位置上与您的侦听器绑定仅限于页面加载时存在的元素。第一个匿名函数是文档加载事件（http://api.jquery.com/ready/）的jQuery简写，第二个匿名函数将click()函数添加到文档中包含类.md-close的所有元素。

要以您需要的方式重新编写它，以便它适用于加载后创建的元素，您的新.js文件应如下所示：

$(function() {
    $("#outputDiv").on('click', '.md-close', function() {
        console.log('close button clicked');
    });
});

这使用与文档加载相同的运行方法，但事件本身附加到#outputDiv - 加载时页面中的元素。然后，每次单击它或其中任何一个子项时，它都会触发一个click事件，并且您的参数表示您只希望在单击的元素具有.md-close类时运行匿名函数。这可以从事件触发时的DOM中发挥作用，因此将包括新添加的元素。

只有在jQuery库之后链接的新.js文件中的那五行代码，当您单击关闭按钮时，您应该看到相应的控制台消息，并且您应该有解决原始问题所需的起点。 jQuery文档质量很高，包含大量示例：http://api.jquery.com/

ajax创建的链接不像硬编码链接（css对象类操作）

1 个答案: