从通过 ajax 加载的数据创建的元素上触发事件

Question

我正在尝试在通过 ajax 加载的元素上触发 click 事件。 但不知何故，我无法选择它来触发事件。

它基本上是一个带有左右箭头的图像。如果您单击其中一个箭头，则会加载一系列图像并像画廊一样替换图像。这已经可以了，我只需要触发第一张幻灯片，这样用户就不会知道画廊是通过 ajax 加载的，但一直都在那里。

替换工作正常，但我无法在 .slidenav-next 元素上触发事件。

.slidenav-next 后面有 JS 行为需要点击触发。

基本 HTML 结构

<div><div class="slidecont"><a href="#" class="slide"></a></div></div>

JS 用新的 HTML 结构填充它

$('body').on('click', '.slide', function(e) {

$.ajax({
  context: this,
  type: "POST",
  url: 'index.php',
  data: {'id':5}
}).done(function(data) {
    $(this).closest('.slidecont').replaceWith(data);

    console.log($(data).find('.slidenav-next'));

    setTimeout(function () {
        $(data).find('.slidenav-next').click();
     }, 200);   
});
});

通过 ajax 加载的 HTML 结构

<div><a href="#" class="slidenav-next"></a></div>

最后

<div><div><a href="#" class="slidenav-next"></a></div></div>

如果我加载这个结构：

<div id="xx"><a href="#" class="slidenav-next"></a></div>

我可以通过以下方式触发它：

$('#xx > .slidenav-next').click();
or via
$('body').find('.slidenav-next').click();

但这不是那么干净。我想从加载的数据中触发它。

Answer 1

var $data = $(data);
$(this).closest('.slidecont').replaceWith($data);
$data.find('.slidenav-next').click();

这种方式将从数据中创建一个 jquery 对象...然后该对象将使用replaceWith 插入到 DOM 中，以后可以引用。

只是直接替换为data 并不会将data var 本身作为存在于DOM 中并且可以从data 引用的元素...data 仍然只是一个字符串...

---

也可以在 done 回调的开头做这样的事情..

var div = document.createElement('div');
div.innerHTML = data; //this creates a child element based on the string in data
var dataEle = div.firstChild; //then we take that child

现在dataEle 引用了一个基于data 字符串创建的元素，可以插入（如replaceWith(dataEle)）并稍后引用（如$(dataEle).find(...）

---

更多错误解释：

您不需要插入 jquery 对象，如第二个示例所示。 jquery 只是接管了创建 dom 元素的工作并保持对它的访问，以便您以后可以引用它。

您遇到的问题是 data 始终只是一个字符串，您使用该字符串创建了一个带有 replaceWith 的 dom 元素...但数据本身仍然只是一个字符串。

然后，当您执行$(data).find('.slidenav-next').click(); 时，它又将data 包装在一个jquery 中，该jquery 使用data 中的字符串创建了它自己的元素（尽管data 仍然只是一个字符串）并且确实触发了该事件...但是该事件在新创建的 jquery 包装元素上触发，该元素从未插入到 DOM 的主体中，而不是您使用 replaceWith 创建的元素

您基本上是从data 字符串创建两个元素，将第一个元素放在您想要的位置，然后在第二个元素上触发事件，而第二个元素从未插入到任何地方。