Question

我加载了一个用PHP构建的图库，我将这个JS代码应用于CSS＆＃34; overlay＆＃34;当我点击图片时。

<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，这些DOM最初并不是为了添加点击功能而添加的。

您只需要将click函数添加到从其成功函数中的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的内容

JS不处理仅从ajax加载的数据

4 个答案: