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。

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

Answer 2

加载 DOM 时该按钮不存在，因此您从未将侦听器附加到它。您需要在实例化后为其分配一个侦听器。 在您的function openOverlay 中为生成的新按钮添加一个侦听器。

$( "#yourbutton" ).on( "click", function() {
  //do something on click
});

Answer 3

您的第一个函数是向所有按钮类对象添加点击函数。然后，您的第二个 ajax 调用将添加到最初不存在的 DOM 中以添加单击功能。

你只需要在它的success函数中将点击函数添加到从ajax创建的新DOM对象中

Answer 4

我相信它会正常工作，您的问题会得到解决。

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

    });
});

点击功能不适用于 ajax 加载的内容