我发现了一个很酷的模态 css 包，它允许您使用 css 弹出窗口(我会分享链接，但不知道是否“允许”……)。我导出他们提供的内容并将其上传到我的网站，效果非常好。所有不同的按钮都会按预期打开和关闭模式。所以我开始扩展它并尝试在(经典)asp 页面上引入一个简单的 javascript 函数，该函数对返回字符串的不同 asp 页面进行 ajax 调用，这也按预期工作。然后我想要在 ajax 响应中创建一个链接，该链接也可以像页面上硬编码的元素一样工作，这就是问题的根源。 ajax 响应与实际页面上的按钮/链接具有相同的代码，但单击它们时不会发生任何情况。
这是我的 index.asp 页面中的 JavaScript:
function ajaxCall(qStr) {
<pre><code>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();
</code></pre>
<p>}</p>
这是调用ajaxCall函数的页面表单:
<code><form>Client's Name: <input type="text" onkeyup="ajaxCall(this.value)" size="20">
</form>
<div id="outputDiv"></div></code>
另一个页面(getHint.asp)在数据库中运行一个循环来查找与表单中输入的字符串匹配的所有项目，这是有效的。这是该页面中最重要的部分:
<code>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></code>, "
因此所有“结果”都被连接起来并在循环末尾输出，这再次起作用。不要太深入 css 起点的细节，但任何具有“md-close”类的对象都会关闭它所在的模式，但这部分不起作用。
我还需要做一些额外的事情才能让页面识别 ajax 调用的响应并让它也操作页面吗？
我已获取 getHint.asp 页面上的代码并将其粘贴到 index.asp 页面，并且该链接可以正常工作。我使用了 firebug，并且 ajax 调用的响应的编码与页面上稍低一点的链接相同，但唯一有效的是硬编码的。
哦，我将 JavaScript 警报放在响应中，上面写着“单击了 ajax 响应链接”，单击链接时该警报确实有效，但模式保持打开状态。
感谢您的浏览，非常感谢任何指点。
更新:根据评论中的要求，这是使用 md-close 类处理对象单击的 javascript:
var ModalEffects = (function() {
<pre><code>function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}
init();
</code></pre>
})();
最佳答案
您的问题是，当您将监听事件绑定(bind)到具有 md-close 类的所有元素时，从 JavaScript 调用加载的元素尚不存在。随后，事件不会绑定(bind)到它们，并且当它们在 AJAX 调用后创建时，它们的点击事件不会触发 - 因为它们没有绑定(bind)。
基本上 - 当您附加事件时，您仅绑定(bind)到具有类 md-close 的所有现有元素，而不是将来可能存在的具有相同类的每个元素。
您需要重新运行代码，将监听事件附加到 if (xmlhttp.readyState==4 && xmlhttp.status==200) block 内的新元素，只需将 AJAX 加载标记添加到页面后。您必须小心，不要向现有标记中添加两次监听器，但希望这个答案能为您提供足够的信息来重构您的代码以实现您所追求的目标。
如果你想切换到 jQuery，它可能会总体上有所帮助，但如果你没有任何使用该库的经验，那么你将不得不学习很多东西。与您在 jQuery 中的情况类似的是，您的类的普通点击处理程序将像这样完成(为了简单起见，创建一个新的 .js 文件，命名为您喜欢的任何名称，并在链接后链接到它到 jQuery 库本身):
$(function() {
$('.md-close').click(function() {
console.log('close button clicked');
});
});
这基本上让您回到原来的问题，您的监听器仅绑定(bind)到页面加载时存在的元素。第一个匿名函数是文档加载事件 ( http://api.jquery.com/ready/ ) 的 jQuery 简写，第二个匿名函数将 click() 函数添加到类 .md-close 的文档中的所有元素.
要按照您需要的方式重写它，以便它可以与加载后创建的元素一起使用，您的新 .js 文件应如下所示:
$(function() {
$("#outputDiv").on('click', '.md-close', function() {
console.log('close button clicked');
});
});
这使用与文档加载时运行相同的方法，但事件本身附加到 #outputDiv - 加载时页面中的一个元素。然后，每次单击它或其任何子元素时，它都会触发一个单击事件，并且您的参数表示您只希望当单击的元素具有 .md-close 类时运行匿名函数。这在事件触发时存在的 DOM 中起作用，因此将包括新添加的元素。
只需在 jQuery 库之后链接的新 .js 文件中的这五行代码，当您单击关闭按钮时，您应该会看到相应的控制台消息，并且您应该拥有解决原始问题所需的起点。 jQuery 文档质量很高，包含大量示例:http://api.jquery.com/
关于javascript - ajax 创建的链接不像硬编码链接那样工作(CSS 对象类操作)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20388296/