javascript - JS 不适用于仅从 ajax 加载的数据

Question

我加载一个由 PHP 构建的图像库，并应用此 JS 代码，以便在单击图像时具有 CSS“覆盖”。

<script type="text/javascript">
    $(".button").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "action.php",
            method: "get",
            data: {
                id: $(this).attr("data-action")
            },
            success: openOverlay
        });
    });
    function openOverlay(html_content) {
        // Clear out the overlay-content
        $("#overlay-content").html("");
        // Add new stuff in
        $("#overlay-content").html(html_content);
        $("#overlay").css("display", 'block').css("opacity", '1');
        $("#mask").css("display", 'block').css("opacity", '1');
    }
    function hide() {
        mask.style.display = "none";
        mask.style.opacity = "0";
        overlay.style.display = "none";
        overlay.style.opacity = "0";
    }
</script>

一切正常。现在，我添加了第二个 AJAX，以便在到达页面底部时加载更多图像。

$(window).scroll(function() {
    if ($(window).scrollTop() + window.innerHeight == $(document).height()) {
        $('div#loadmoreajaxloader').show();
        $.ajax({
            url: "loadmore.php",
            method: "get",
            data: {
                id: "5"
            },
            success: function(html) {
                if (html) {
                    $("#postswrapper").append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            }
        }); // close AJAX
    }
});

这也很有效，当我到达页面底部时，它会加载更多图像。没有问题。

我的问题:按钮单击仅适用于使用 HTML 加载的第一个加载的数据，不适用于 AJAX 加载的图像。

这是我的 html:

<div style="background:url(../blogimages/<? echo $blog2['img_url']; ?>); 
                    background-size:cover;
                    background-position: center; 
                    overflow:hidden;" id="box-item" class="button" data-action="<? echo $blog2['blogimage_id']; ?>">
    <div id="mouseover">
        <span id="plus">READ MORE</span>
    </div>
</div>

这是来自 AJAX loadmore.php 的回显:

while($blog2 = mysql_fetch_array($sql))
{  
   $html .='
    <div style="background:url(../blogimages/'.$blog2['img_url'].'); 
                background-size:cover;
                background-position: center; 
                overflow:hidden;" 
                    id="box-item" class="button" data-action="'.$blog2['blogimage_id'].'">
              <div id="mouseover">
                <span id="plus">READ MORE</span>
              </div>
    </div>';

     }  // close while tag

    echo $html;
    exit;

对于单击按钮而不执行从 AJAX 加载的数据，我有什么想法吗？它在加载 HTML 的第一张图像中完美运行。

Answer 1

使用

$(document).on('click', '.button', function(e) {
    e.preventDefault();
    $.ajax({
            url: "action.php",
            method: "get",
            data: {
                    id: $(this).attr("data-action")
            },
            success: openOverlay

    });
});

您可以将 document 替换为由 AJAX 回调修改的容器，我认为缩小点击事件区域的范围更好。在这种情况下，它应该是#postswrapper。

此绑定(bind)方法将 event.target 与传递的选择器 (.button) 进行匹配，如果为 true，则它将执行此绑定(bind)函数具有的任何操作。