Question

我有3层数据：

[PHP已加载]
“点击”
- [加载Ajax]
  “点击”
- [Ajax已加载]

我试图在网页加载时根据网址参数在AJAX链接上使用jQuery 1.91触发点击。

第一个加载/点击触发器工作正常：

var param1 = $.getURLParam("id");
var theShow = $('header#showhead' + param1 + ' a.theshow');
if (param1!=null) {
    $(theShow).trigger('click');
}

这会使用锚点加载AJAX内容，再次通过AJAX点击并加载第3层数据。

我无法触发第二个触发器。

var param1 = $.getURLParam("id");
var param2 = $.getURLParam("sid");
var theShow = $('header#showhead' + param1 + ' a.theshow');
var theSeason = $('header#seasonhead' + param2 + ' a.theseason');
if (param1!=null) {
    $(theShow).trigger('click', function() {
        if (param2!=null) {
            $(theSeason).trigger('click');
        }
    });
}

我已经验证了正确看到的两个参数变量，并且正在选择器中进行纠正。

基本HTML设置：

<section id="show1234">

    <header id="showhead1234">
        <a href="#" class="theshow">Title</a>
    </header>

   <!-- loaded by AJAX call on link above -->
   <section id="season000">
       <header id="seasonhead000">
           <a href="#" class="theseason">Title</a>
       </header>

       <!-- loaded by AJAX call on link above -->
       <section class="datastuff"></section>
   </section>

</section>

我认为问题可能是在第二个触发器触发之前第一个ajax调用没有完成。我尝试使用setTimeout()进行第二次触发无效。

知道如何在第一次AJAX调用完成后触发第二次点击吗？

我可以在第一个AJAX请求中创建现有complete()函数的本地添加吗？（如果可能的话，我真的不想改变AJAX。）

我已经看到了其他问题，我不打算自己链接AJAX调用，只是单击触发器。

控制台显示：

        console.log(param1);
        console.log(theShow);
        console.log(param2);
        console.log(theSeason);

404 //param1
[a.theshow, prevObject: init[1], context: document, selector: "header#showhead404 a.theshow"]
2425 //param2
[prevObject: init[1], context: document, selector: "header#seasonhead2425 a.theseason"]

所以看起来似乎从未真正抓过选择器。

Answer 1

如果您通过ajax加载#seasonshead，一个问题可能是当您声明变量theSeason时，您正在寻找的元素尚未存在于页面上：< / p>

var theSeason = $('header#seasonhead' + param2 + ' a.theseason');

在将元素附加到DOM之后，以及将click事件侦听器附加到它之后，您需要查询该元素。

由于您的代码中没有显示这两件事，我假设它正由其他一些代码处理。所以除了延迟元素查询之外，我还是建议超时，以允许这个假设的其他代码运行。

另一件事是，你是在第一次点击的回调中触发第二次点击，你要找的是ajax回调。您可以使用ajaxSuccess（http://api.jquery.com/ajaxSuccess/）拦截所有回复：

var param1 = $.getURLParam("id");
var param2 = $.getURLParam("sid");
var theShow = $('header#showhead' + param1 + ' a.theshow'); // this is already a jQuery object, no need to wrap in $() again later
var theSeason = 'header#seasonhead' + param2 + ' a.theseason'; // this is just a string
if (param1!=null) {
    $('body').on('ajaxSuccess', function() { // start watching requests
        if (param2!=null) {
            setTimeout(function(){
                $(theSeason).trigger('click');
            }, 0);
        }
        $('body').off('ajaxSuccess') // stop watching requests
    })
    theShow.trigger('click'); // trigger request
}

请注意，如果同时发生其他ajax调用，则需要检查响应以确保处理预期的调用。

Answer 2

好的..这就是我如何运作......

        var param1 = $.getURLParam("id");
        var param2 = $.getURLParam("sid");
        var theShow = $('header#showhead' + param1 + ' a.theshow');

        if (param1) {
            $(theShow).trigger('click');
            $(document).one('ajaxComplete', function(){
                if (param2) {
                    setTimeout(function(){
                    var theSeason = $('#seasonhead' + param2 + ' a.theseason');
                    $(theSeason).trigger('click');
                    }, 300);
                }
            });
        }

param2的变量定义的

展示位置有所不同。它必须在第一个ajax完成后定义。

使用ajaxComplete()绑定全局$(document).one('ajaxComplete', function(){});函数允许完成一个ajax调用，然后触发内部语句。由于页面加载将触发第一个呼叫，我只需要观看第一个呼叫。

使用$(document).ajaxComplete()导致第二次激活两次（因为它也完成了）。此外，通过绑定到ajaxComplete()函数，它确保在第一次ajax调用完成之前不会触发第二次单击触发器，从而解决了计时问题。

第二次点击触发器的setTimeout()更多地是关于用户体验而非功能性。使用绑定的完整功能，不需要超时。如果没有超时，事件将立即连续触发。仅为视觉阶梯步骤添加了超时。

使用多个AJAX请求链接jQuery单击触发器

2 个答案: