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字符串中创建两个元素，将第一个元素放在你想要的位置，然后在第二个从未插入任何地方的事件中触发事件。

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

1 个答案: