jQuery AJAX循环单击事件_Jquery_Ajax_Loops_Events_Click

jQuery AJAX循环单击事件

jquery ajax loops events

jQuery AJAX循环单击事件,jquery,ajax,loops,events,click,Jquery,Ajax,Loops,Events,Click,我们有一个简单的jQuery HTML页面，用于加载AJAX数据现在，我们在处理迭代中的项目时遇到了问题 $.each循环中有一个元素，提供数据库中保存的项目。我们需要能够在循环中单击这些项，并将它们的ID值传递给另一个AJAX调用由于这些项正在被迭代，因此我们无法使用它们。在循环之外，它完全按照预期工作。我们认为我们需要绑定事件，但在这种情况下我们所做的一切都不起作用。非常感谢您的帮助 $.ajax({ url: '/website/ajax',

我们有一个简单的jQuery HTML页面，用于加载AJAX数据

现在，我们在处理迭代中的项目时遇到了问题

$.each循环中有一个元素，提供数据库中保存的项目。我们需要能够在循环中单击这些项，并将它们的ID值传递给另一个AJAX调用

由于这些项正在被迭代，因此我们无法使用它们。在循环之外，它完全按照预期工作。我们认为我们需要绑定事件，但在这种情况下我们所做的一切都不起作用。非常感谢您的帮助

$.ajax({
                    url: '/website/ajax',
                    method: 'GET',
                    dataType: 'JSON',
                    success: function (data) {
                        var addlink = '+ Add';
                        var itemstore = '';
                        
                        $.each(data, function (i, item) {
                            let badgeitem = item.badge.split('.')[0].replace(/^\w/, (badge) => badge.toUpperCase());
                            itemstore += '<li><a href="#"><img title="' + item.descr + '" style="width:65px;height:65px" src="/images/newsfeed/badges/' + item.badge + '" /></a>' + badgeitem + '</li>';    
                        });
                    }
                });
            });

由于li元素在页面加载后添加到DOM中，因此可以使用绑定到公共父元素的委托事件处理程序来处理单击操作。此外，您还可以使用数据属性保存id属性的值，并在该单击处理程序中检索它，如下所示：

//在AJAX回调内部： let itemstore=data.forEachitem=>{ 让badgeitem=item.badge.split'.[0]。替换/^\w/，badge=>badge.toUpperCase；返回`${badgeitem}`； } $'parent'.appenditemstore； //外部AJAX回调： $'parent'。单击时，'li a'，e=>{ e、防止违约；设id=$e.target.data'id'； console.logid； }; 请注意，我从li HTML中删除了内联样式，它应该放在外部样式表中，而不是放在JS中的HTML中。

Swati发布的解决方案就是答案。这是原始问题的完整解决方案

$.ajax({
            url: '/ajax/ajax_test.php',
            method: 'GET',
            dataType: 'JSON',
            success: function (data) {
                var itemstore = '';
                $.each(data, function (i, item) {
                    let badgeitem = item.badge.split('.')[0].replace(/^\w/, (badge) => badge.toUpperCase());
                    itemstore += '<li data-id="' + item.id + '" data-name="' + item.badge + '"><img title="' + item.descr + '" style="width:65px;height:65px" src="/images/newsfeed/badges/' + item.badge + '" />' + badgeitem + '</li>';
                });
                $('#badge-store').html('+ Add');
                $('.first-set').html(itemstore);

                var selected = false;
                $('.first-set').on('click', 'li', function () {
                    if (selected == false) {
                        selected = true;
                    } else {
                        selected = false;
                    }
                    if (selected) {
                        $.ajax({
                            type: 'POST',
                            url: '/website/ajax',
                            data: {
                                badge_id: $(this).data('id'),
                                badge_name: $(this).data('name'),
                                post_id: 454,
                                user_id: 1
                            },
                            beforeSend: function () {
                                alert('POST ajax started');
                            },
                            success: function (data) {
                                alert('Badge submitted successfully.');
                            },
                            error: function (data) {
                                alert('Error');
                            }
                        });
                    } else {
                        // no action
                    }
                });
            }
        });

因此，这是一个向迭代元素添加数据属性的问题，在循环外部之后，在代码块之后，调用$this.data'id'，而id是数据-**键**键是AJAX循环中的一个项

一旦应用，如图所示。。您可以根据找到的数据元素继续进行后期处理，并像端点脚本中的INSERT或UPDATE语句一样传递这些值-AJAX url。

我遵循了这一点，前后进行了精确的说明，并测试了一个小时。我破坏了JS，没有JSON响应。没有来自任何变量、警报或控制台的输出。我删除了第一个“let”块，页面被还原，这导致了最初的困境。请您更新问题，将页面的HTML以及返回到AJAX请求中的数据的内容包括在内。此解决方案根本不是问题的答案，并且在许多广泛的试验中都不起作用。请看我自己回答的问题。您发布的答案与我上面使用的模式完全相同。唯一真正的区别是，您将数据属性放在li元素上，而不是a元素，而a元素似乎已被完全删除。问题完全是让itemstore=data.forEachitem=>{let-badgeitem=item.badge.split.'[0]。替换/^\w/，badge=>badge.toUpperCase；返回`${badgeitem}；}嗨，你是说喜欢吗？是的！！确切地非常感谢你花时间在这个Swati上，我非常感谢+1.

<body>
    
<div class="launcher">
    <div class="app-launcher">
      <div class="apps">
        <ul class="first-set"></ul>
        <a href="#" class="more">More</a>
        <ul class="second-set hide">
          <li><a href="#"><i class="fa fa-dribbble fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-html5 fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-linux fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-css3 fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-github fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-pinterest fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-tumblr-square fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-dropbox fa-4x"></i></a> </li>
          <li><a href="#"><i class="fa fa-instagram fa-4x"></i></a> </li>
        </ul>
      </div>
    </div>
  </div>

<!-- load badges -->
<div style="display:inline;float:left">
    <div id="badge-users"></div>
</div>

<!-- badge browse -->
<div style="display:inline;float:left" id="badge-store">Loading...</div>
<div style="clear:both"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
$(document).ready(function () {

    var scroll = false;
    var launcherMaxHeight = 100;
    var launcherMinHeight = 100;

    $('.app-launcher').hide();

    // Mousewheel event handler to detect whether user has scrolled over the container
    $('.apps').bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            // Scrolling up
        } else {
            // Scrolling down
            if (!scroll) {
                $(".second-set").show();
                $('.apps').css({
                    height: launcherMinHeight
                }).addClass('overflow');
                scroll = true;
                $(this).scrollTop(e.originalEvent.wheelDelta);
            }
        }
    });

    // Scroll event to detect that scrollbar reached top of the container
    $('.apps').scroll(function () {
        var pos = $(this).scrollTop();
        if (pos == 0) {
            scroll = false;
            $('.apps').css({
                height: launcherMaxHeight
            }).removeClass('overflow');
            $(".second-set").hide();
        }
    });

    // Click event handler to show more apps
    $('.apps .more').click(function () {
        $(".second-set").show();
        $(".apps").animate({
            scrollTop: $('.apps')[0].scrollHeight
        }).css({
            height: 296
        }).addClass('overflow');
    });

    // Click event handler to toggle dropdown
    $("li").click(function (event) {
        event.stopPropagation();
        alert('Item selected. Send to AJAX.');
        $(".app-launcher").toggle();
    });

    // Click event handler to toggle dropdown
    $("#badge-store").click(function (event) {
        event.stopPropagation();
        $(".app-launcher").toggle();
    });

    // Prevent hiding on click inside app launcher
    $('.app-launcher').click(function (event) {
        event.stopPropagation();
    });

    $(document).click(function () {
        //Hide the launcher if visible
        $('.app-launcher').hide();
    });

    $.ajax({
        url: '/ajax_newsfeed_badges.php?id=454',
        method: 'GET',
        dataType: 'JSON',
        cache: false,
        success: function (res) {
            res.forEach((element, i) => {
                data = {
                    badgeinfo: element['info'],
                    badge: element['badge'],
                    avatars: element.avatars
                }
                let avatars = [];

                // Users + badges already awarded
                data.avatars.forEach(avatar => {
                    avatars.push('<span class="tooltip-badge" title="' + data.badgeinfo + '" style="position:relative;margin-right:-10px;z-index:95000"><img src="/images/newsfeed/badges/' + data.badge + '" /></span><a href="/user/?id=' + avatar.userid + '"><img itemprop="image" class="responsive-img" style="width:25px;height:25px;margin-right:5px;border-radius:50%" src="/' + avatar.avatar_thumb + '" /></a></span>');
                });
                avatars.forEach(avatar => {
                    $('#badge-users').append(avatar);
                });

                // Browse available badges
                $.ajax({
                    url: '/website/ajax',
                    method: 'GET',
                    dataType: 'JSON',
                    success: function (data) {
                        var addlink = '+ Add';
                        var itemstore = '';
                        
                        $.each(data, function (i, item) {
                            let badgeitem = item.badge.split('.')[0].replace(/^\w/, (badge) => badge.toUpperCase());
                            itemstore += '<li data-name="dsf"><a href="#"><img title="' + item.descr + '" style="width:65px;height:65px" src="/images/newsfeed/badges/' + item.badge + '" /></a>' + badgeitem + '</li>';    
                        });

                        $("#badge-store").html(addlink);
                        $(".first-set").html(itemstore);
                    }
                });
            });

            $('.tooltip-badge').tooltipster({
                animation: 'grow',
                delay: 200,
                theme: 'tooltipster-punk'
            });
        }
    });
});
</script>
</body>

[{"badge":"ghost.png","descr":"Sends a ghostly vibe","id":"1"},{"badge":"bitcoin.png","descr":"Mining this post?!","id":"2"}]

$.ajax({
            url: '/ajax/ajax_test.php',
            method: 'GET',
            dataType: 'JSON',
            success: function (data) {
                var itemstore = '';
                $.each(data, function (i, item) {
                    let badgeitem = item.badge.split('.')[0].replace(/^\w/, (badge) => badge.toUpperCase());
                    itemstore += '<li data-id="' + item.id + '" data-name="' + item.badge + '"><img title="' + item.descr + '" style="width:65px;height:65px" src="/images/newsfeed/badges/' + item.badge + '" />' + badgeitem + '</li>';
                });
                $('#badge-store').html('+ Add');
                $('.first-set').html(itemstore);

                var selected = false;
                $('.first-set').on('click', 'li', function () {
                    if (selected == false) {
                        selected = true;
                    } else {
                        selected = false;
                    }
                    if (selected) {
                        $.ajax({
                            type: 'POST',
                            url: '/website/ajax',
                            data: {
                                badge_id: $(this).data('id'),
                                badge_name: $(this).data('name'),
                                post_id: 454,
                                user_id: 1
                            },
                            beforeSend: function () {
                                alert('POST ajax started');
                            },
                            success: function (data) {
                                alert('Badge submitted successfully.');
                            },
                            error: function (data) {
                                alert('Error');
                            }
                        });
                    } else {
                        // no action
                    }
                });
            }
        });