在Ajax成功后触发链接点击

Question

我需要在Ajax成功后触发一个链接点击。 我目前拥有的代码是：

jQuery.ajax({
//Ajax Options
success: function(value) {
    jQuery('.parent_selector').html(jQuery(value).find('.child_selector'));
    jQuery('.test-link').trigger('click');
},
error: function() {
    //alert(error);
} });

Ajax部分运作良好，我能够使用Ajax响应数据加载.parent_selector div。之后，我需要触发一个链接点击事件，我在上面的代码中使用了jQuery('.test-link').trigger('click');。然而，链接点击事件从未被触发。为了检查，我将jQuery('.test-link').trigger('click');移至jQuery(document).ready(function()中，以查看链接是否在页面加载时被触发。但是它在那里也不起作用。我接下来尝试的事情是将jQuery('.test-link').trigger('click');放在另一个链接的点击事件中，如下所示：

jQuery('section[role="main"]').on('click', '.another-link', function(e){
e.preventDefault();

jQuery('.test-link').trigger('click');

});

太好了！它可以在另一个链接的点击事件中工作。因此，我真的很困惑我在这里做错了什么。为什么jQuery('.test-link').trigger('click');不能与Ajax成功调用合作？

- John

---

你可以使用jQuery('.test-link').click();代替jQuery('.test-link').trigger('click');。 - Selvakumar Arumugam

@SKS jQuery('.test-link').click(); 的行为与 jQuery('.test-link').trigger('click'); 相同。没有运气。 - John

你的 AJAX 响应（value）中是否包含 .test-link？ - j08691

你尝试在触发器上使用setTimeout()了吗？有时候它会起作用... setTimeout(function(){ jQuery('.test-link').trigger('click'); },400) - sanusi

你能看一下这个jsfiddle http://jsfiddle.net/uaBuj/ 吗？我重现了你描述的行为，而且它似乎可以工作。很有趣知道你在代码中是如何实现的。 - Pandaiolo

Answer 1

当您使用:

$(".test_link").trigger("click")
// or
$(".test_link").click()

你只执行链接中的onclick事件，可以通过jQuery绑定或onclick属性实现，但是它不会打开你在href中拥有的页面。

因此，如果你想要打开href中的链接，需要按照以下方式进行操作：

window.location = $(".test_link").attr("href");

我能想到的另一个原因是您正在动态获取链接，获取链接后没有添加任何处理程序在点击事件上。jQuery的"live"可以解决这个问题，但如果您知道父容器是什么，我更喜欢使用delegate。

- gaurang171

Answer 2

如果您的链接是从 AJAX 调用返回的值的一部分，那么点击功能将无法绑定到该对象上。请尝试使用 .live() 代替 .click() 将函数绑定到对象上。

<script>
jQuery('.test-link').live('click', function(){
   //your function stuff
});
</script>

这将使您能够创建动态内容，而无需每次创建链接时重新绑定该函数。

- Nick

---

on() 在 jQuery 1.7 中替代了 live()。 - Manse

@ManselUK 我没有意识到那个方法已经被弃用了。使用.on()的方式与.live()不同。也许问题在于事件处理程序没有正确委托。请参考直接绑定和委托绑定，该链接位于页面下方四分之一处。 - Nick

@Nick .test-link不是由服务器返回的Ajax数据的一部分。因此，它始终存在于页面上，因此不需要使用on()或live()。 - John

@John，AJAX 是在 click 函数定义之前还是之后发生的？另外，click 函数和 AJAX 调用是否在同一作用域内？ - Nick

@John 如果您在另一个函数内定义了单击函数，它仅存在于该父函数中。变量也是如此，除非在全局范围内定义。如果AJAX和click函数都在同一作用域（函数）内定义，则应该可以正常工作。能否展示更多的代码？ - Nick

Answer 3

这是一个可运行的示例

http://jsfiddle.net/CHUsU/1/embedded/result/

在某些浏览器中，您可能会收到安全沙箱警告，因此如果无法正常工作，请将所有内容放入硬盘驱动器中。-Miles

- lededje

Answer 4

$('#test').live('click', function() {
    window.alert("works");            
});

$('#test').trigger('click');

- Shrikant Jadhav

Answer 5

尝试使用$('.test-link').click()

- BuzzzHost.com

Answer 6

只需替换

 jQuery('.test-link').trigger('click');

与

 jQuery('.test-link').click();

或者

$('.test-link').click();

- Code