Question

建立一个管理公司信息的系统，我需要列出他们所在的县。我有一个数据库表，其中包含英国各县的完整列表，然后另一个表包括已经分配的交叉参考概述不管公司与否。

在界面上，PHP生成了两个列表，其中一个已经分配，另一个没有。我想要它，以便点击任何县名将其从一个列表移动到另一个列表，保留预定义的排序顺序。

jQuery AJAX将ID发送到PHP文件，该文件更新数据库（添加或删除与公司的县关联），并返回一个字符串以插入页面。

到目前为止，在添加或删除县域关联时，将从列表中删除整个链接，正确更新数据库，并按预期将正确的字符串返回到回调。但是，虽然在根据需要删除关联时它会将字符串添加到div#counties_off，但在创建关联时，它根本不会将字符串添加到div#counties_on。

使用console.log我可以看到数据正确返回，并与正确的目标相关联。

HTML

<div class="counties" id="counties_on">
  <a class="county_link" data-cuid="6" data-status="1" id="cou6">Cornwall</a>
  <a class="county_link" data-cuid="9" data-status="1" id="cou9">Devon</a>
  <a class="county_link" data-cuid="35" data-status="1" id="cou35">Somerset</a>
</div>
<div class="counties" id="counties_off">
  <a class="county_link" data-cuid="1" data-status="0" id="cou1">Bedfordshire</a>
  <a class="county_link" data-cuid="2" data-status="0" id="cou2">Berkshire</a>
  <a class="county_link" data-cuid="3" data-status="0" id="cou3">Buckinghamshire</a>
  <a class="county_link" data-cuid="4" data-status="0" id="cou4">Cambridgeshire</a>
  <a class="county_link" data-cuid="5" data-status="0" id="cou5">Cheshire</a>
  <a class="county_link" data-cuid="7" data-status="0" id="cou7">Cumbria</a>
  <a class="county_link" data-cuid="8" data-status="0" id="cou8">Derbyshire</a>
...//Continues for all counties of the UK
</div>

的jQuery

<script>
$(document).ready(function(){
    $('.county_link').bind('click',function(e){
        var element = $(this).attr('id');
        var cu_id = $(this).data('cuid');
        var status = $(this).data('status');
        if(status == 1) {
            var target = '#counties_off';
        } else {
            var target = '#counties_on';
        }
        $.ajax({
            url: '/includes/ajax/county.ajax.php',
            type: "POST",
            data: {'cu_id': cu_id, 'status': status, 'co_id': 0},
            success: function(data) {
              if (data != 0) {
                  var added = 0;
                  $('#'+element).fadeOut("fast",function(){
                    $("a", target).each(function(){
                        if ($(this).data('cuid') > cu_id) {
                            $(data).insertBefore($(this)).fadeIn("fast");
                            added = 1;
                            return false;
                        }
                    });
                    if(added != 1) { 
                        $(data).appendTo(target); 
                    }
                    $('#'+element).remove();
                  });
                  console.log(added + target);
              } else {
                alert("Something went wrong.");
              }
            },
            error: function() {
                alert("Something went wrong.");
            }
        });
    });
});
</script>

作为服务器返回的数据的示例：

<a class="county_link" data-cuid="7" data-status="0" id="cou7">Cumbria</a>

添加或删除data-status属性的值之间的唯一区别。

坦率地说，我不知道它为什么会以某种方式运作，而不是另一种方式。

我有一个最后一个问题，虽然我已经使用bind作为jQuery触发器，但是除非重新加载页面，否则它在点击已经移动的任何a.county_link元素时不会激活。

Answer 1

试试这个：$(document).on('click', '.county_link', function(e){..});

AJAX更新在删除时会在列表中插入元素，但在添加时不会

1 个答案: