Question

我使用按钮发布数据使用ajax（加入并离开像facebook这样的组），在发布成功后，它将刷新部分页面元素并重新加载内容。重新加载内容后，它也会替换按钮。

<div id = "#profile-pic"> 
.....
<a class="btn button_intro join_leave_group" href="#">Join Group</a>
.....
</div>

div重新加载后按钮变为

<div id = "#profile-pic"> 
.....
<a class="btn button_intro join_leave_group" href="#">Leave Group</a>
.....
</div>

问题是，当我单击“加入组”按钮时，它将加入组，刷新div元素并将按钮替换为“离开组”（接收响应需要更长的时间）但是如果我在离开组中单击它不会触发按钮单击。但是如果刷新页面并单击“离开组”按钮它可以正常工作但是再次加入组不起作用。

这是我的剧本：

<script>
    $( document ).ready(function() {
        $('.join_leave_group').click(function(){

            var type = $('.join_leave_group').text();

            if(type == "Join Group"){
                var xhr = null;
                console.log("I was clicked"); //test if clicked             
                var xhr =   $.ajax({
                    type: 'POST',
                    url: '/join',
                    data: {
                        group: "{{ some value }}"
                    },
                    beforeSend: function (request) {
                        return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
                        if(xhr != null) {
                            xhr.abort();
                        }
                    },
                    success: function (data){
                        $('#profile-pic').load(document.URL + ' #profile-pic');
                        xhr.abort();
                    }               
                });
            }else{
                console.log("I was clicked"); //test if clicked 
                var xhr = null;
                var xhr =   $.ajax({
                    type: 'POST', 
                    url: '/leave', 
                    data: {
                        group: "{{ some value }}"
                    },
                    beforeSend: function (request) {
                        return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
                        if(xhr != null) {
                            xhr.abort();
                        }
                    },
                    success: function (data){
                        $('#profile-pic').load(document.URL + ' #profile-pic');
                        xhr.abort();
                    }
                });
            }           

        });

    });
</script>

任何人都可以提供帮助，或者解释为什么会这样？或者什么是创建像Facebook群组这样的加入/离开按钮的最佳选择。

提前致谢，花时间检查一下。

未触发JQuery Ajax按钮单击

0 个答案: