javascript - 使用通过 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() .

您现在拥有的代码仅在运行时将点击处理程序附加到所选元素。您想要做的是将点击处理程序附加到所有匹配的元素，无论它们何时出现(因此，这意味着页面最初完成加载后通过 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()，您将能够加载匹配的元素并让处理程序自动附加到它们。