Question

我的jQuery代码出错了。基本上我想在用户点击按钮后加载更多的消息。问题是，它返回结果3次。我已经尝试了几乎所有的东西 - .unbind（used .bind）/ .off / .stopPropagation（）和我想到的其他方法。我搜索了整个谷歌，但仍然无法找到解决方案。也许有人可以澄清我的问题在哪里？

 $(document).ready(function(){
    $("#website_post_content_table_bottom_settings_left :input").on("click", function(event){
        if($('.website_post_content_table_data#bigNews').is(":visible")){
            var currentId = $('.website_post_content_table_entry:last').attr("id");
            $.ajax({
                type: "POST",
                url: "php/admin_functions.php",
                data: {callFunction: "getMoreNewsEntrys", id: currentId},
                cache: false,
                success: function(html){
                    $('.website_post_content_table_data').after(html);
                }
            });
        }
    });
});

编辑：

HTML

<div id="website_post_content_table_bottom_settings_left">
    <p>Ielādēt papildus:</p>
    <input type="button" style="display:none;">
    <input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+5">
    <input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+10">
    <input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+15">
    <input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+20">
</div>

编辑v3： 我创建了新的javascript文件，仅用于这个小代码，它仍然返回3次：

$(document).ready(function(){
    $("#website_post_content_table_bottom_settings_left :input").one("click", function(event){
        $('.website_post_content_table_data').after('<p>Something More</p>');
    });
});

Answer 1

使用jQuery的.each()循环遍历该元素。然后添加对每个input项的引用。或试试这个：

$(document).ready(function(){
    $("#website_post_content_table_bottom_settings_left :input").unbind("click").bind("click", function(event){
        if($('.website_post_content_table_data#bigNews').is(":visible")){
            var currentId = $('.website_post_content_table_entry:last').attr("id");
            $.ajax({
                type: "POST",
                url: "php/admin_functions.php",
                data: {callFunction: "getMoreNewsEntrys", id: currentId},
                cache: false,
                success: function(html){
                    $('.website_post_content_table_data').after(html);
                }
            });
        }
    });
});

Answer 2

您可以使用Jquery.one()

$(document).ready(function(){
    $("#website_post_content_table_bottom_settings_left :input").one("click", function(event){
    if($('.website_post_content_table_data#bigNews').is(":visible")){
        var currentId = $('.website_post_content_table_entry:last').attr("id");
        $.ajax({
            type: "POST",
            url: "php/admin_functions.php",
            data: {callFunction: "getMoreNewsEntrys", id: currentId},
            cache: false,
            success: function(html){
                $('.website_post_content_table_data').after(html);
            }
        });
    }
   });
});

这只会将事件绑定一次。参考链接http://api.jquery.com/one/

Answer 3

首先，我要非常感谢所有试图提供帮助的人！

我的问题是我在CSS中使用display: none;导致这些条目以隐藏的方式更新。

还要感谢所有试图提供帮助的人！：）

jQuery.on（＆＃34;点击＆＃34;）点击一次多次触发

3 个答案: