Question

我正在加载一系列链接中的内容：

<div id="tagList" style="display: block;">
  <ul class="post_tags">
    <li id="barrow" class="count-1"><a class="barrow" title="Barrow Tag" href="#Barrow">Barrow</a></li>
    <li id="carnies" class="count-3"><a class="carnies" title="Carnies Tag" href="#Carnies">Carnies</a></li>
    </ul>   
</div>

然后用ajax加载相关页面打开一系列图像，该函数如下所示：

    $('#tagList li').each(function() {
        $(this).click(function() {

            var tagName = $(this).attr("id");
            var tagURL = '<?php bloginfo( 'url' );?>/tag/' + tagName;
            var toLoad = '<?php bloginfo( 'url' ); ?>/tag/'+ tagName + ' .tagTable';


            function loadThemTags(){    

            $('#tagThumbs').load(toLoad,hideLoader);
            };

            function hideLoader(){

            $('.tagTable').fadeIn('slow');
            };

            loadThemTags();

        });
 });

.tagTable中加载的内容如下所示：

<ul id="tagImgBox">         
    <li class="466">
        <div style="display:none" class="466_link">http://foo.com/portfolio/louie</div>
        <img class="tagInfoTrigger" alt="Louie" src="http://foo.com/wp-content/themes/Loupe/scripts/timthumb.php?src=/wp-content/uploads/2011/08/louie.jpg&amp;w=80&amp;h=80&amp;zc=1">
    </li>   
    <li class="418">
        <div style="display:none" class="418_link">http://foo.com/portfolio/devo-and-seigfried</div>
                <img class="tagInfoTrigger" alt="Devo and Seigfried" src="http://foo.com/wp-content/themes/Loupe/scripts/timthumb.php?src=/wp-content/uploads/2011/06/devo_siegfried_2.jpg&amp;w=80&amp;h=80&amp;zc=1">
    </li>
</ul>

我想使用隐藏div中打印的链接。我有这个脚本：

$('#tagImgBox li').each(function(){
    $(this).click(function(){
    var uc = $(this).attr('class');
    var uc = uc + "_link";
    var up = $('.' + uc).html();
    alert (up);
    });
});

如果我直接导航到/ tag /页面，它可以工作。但是，如果我访问加载了.tagTable的ajax，它们就无法工作。什么都没发生，甚至断点也被忽略了。就好像#tagImgBox li不存在，但是我可以看到当通过ajax时，id就在那里。

希望我的问题有道理并感谢您的帮助！

Answer 1

你的.each运行时，你确定在DOM中存在ul（tagImgBox）及它包含li吗？

这听起来像是一个并发问题，因为#tagImgBox li确实还不存在。您需要：发布更多代码，以便我们可以看到.each实际运行的位置，或者查看事件绑定加载完成函数。

Answer 2

您需要使用.live()代替.click()。

您现在拥有的代码只在运行时将点击处理程序附加到所选元素。你想要做的是将click处理程序附加到所有匹配的元素，无论它们何时出现（因此，这意味着在页面最初加载完成后通过AJAX加载的内容）。

以下是您应该使用的代码：

$('#tagImgBox li').live("click", function(){
    var uc = $(this).attr('class');
    var uc = uc + "_link";
    var up = $('.' + uc).html();
    alert (up);
    });
});

您也不需要.each()（使用.live()或.click()），因为默认情况下事件处理程序会附加到每个选定的元素。实际上，大多数jQuery方法都是这样的。

通过使用.live()，您将能够加载匹配的元素并让处理程序自动附加到它们。

Answer 3

将$('#tagImgBox li').each代码添加到hideLoader()功能的末尾。

使用通过ajax加载的选择器

3 个答案: