使用通过ajax加载的选择器

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/页面，它就会起作用。但是，如果我访问加载了ajax的.tagTable，它们就不能工作。什么都不会发生，甚至中断点也会被忽略。这就好像#tagImgBox li不存在一样，但是当通过ajax拉出时，我可以看到id在那里。

希望我的问题有意义，感谢大家的帮助！

Answer 1

您需要使用.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 2

您确定在运行.each时，DOM中存在ul (tagImgBox)及其包含的li吗？

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

Answer 3

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