使用 jquery 将事件附加到平面 ajax 响应 html

Question

在我们的应用程序中，我们正在执行一些 AJAX 响应。有时我们会收到一个未完全包含下面代码中的测试 3 的响应。虽然可以让人们屈服，但我想在代码中添加一些腰带和吊带来处理这种情况。

关键是 findself() 函数，该函数旨在通过 $('...html...') 字符串获取任何响应 html 块，然后对其进行适当的处​​理。这仅适用于某些情况，但在情况 #3 中，它会因浏览器中的 getAttribute 错误而终止。

关于如何扩展 findself() 函数来处理情况 #3 有什么好主意吗？

var html;

function findself(sel, html) {
    return html.is(sel) ? html.find(sel).add(h) : html.find(sel);
}

html = $('<span rel="toggle">foo</span>');

findself('[rel="toggle"]', html).each(function () {
    console.log('ok 1');
});
console.log('done case 1');

findself('[rel="toggle"]', $('testing of a text node')).each(function () {
    console.log('ok 2');
});
console.log('done case 2');

html = $('<span>foo</span>some text<div rel="toggle">xx</div>');

findself('[rel="toggle"]', html).each(function () {
    console.log('ok 2');
});
console.log('done case 3');

Answer 1

快速版本：您可以通过确保文本元素不在两个元素之间且位于根元素之间来回避当前问题，如下所示：

function findself(sel, html) {
    var h = $("<div />").append(html);
    return h.is(sel) ? h.find(sel).add(h) : h.find(sel);
}

您可以在此处进行测试。

---

解释：这是 jQuery 核心中的一个错误。由于有开始/结束标记，它会将其检测为 HTML 字符串，但它不是单个元素。它有 3 个节点，其中一个是文本，由于这种不正确的检测，它错误地将其视为元素字符串，而不是子元素的集合，例如：

jQuery.filter('[rel="t"]', $('<span>foo</span>some text'));            //works
jQuery.filter('[rel="t"]', $('<div><span>foo</span>some text</div>')); //works
jQuery.filter('[rel="t"]', $('<span>foo</span>text<div>xx</div>'));    //fails

所以目前， jquery.filter() （其中 .is() 使用）不适用于中间的文本节点。