Question

我使用dropdown-Button-Menu和不同的li-Elements和两个ul-Elements。

现在我想将li-Elements从第一个div移动到第二个div，反之亦然。

为了更好地理解，这里是jsFiddle

例如，如果我取消选中'概念'，它可以正常工作。 list元素将被移动到id ='scrollArea'的div。例如，它也可以点击'Abstract'。问题是：如果我首先检查'概念'然后取消选中此输入，则它不起作用。我无法使用id =“scrollArea”将li-Element移回div。出了什么问题？谢谢你的帮助。

HTML

<div class="btn-group label-group" id="labelButton">
    <button type="button" id="label" class="btn btn-default dropdown-toggle" aria-expanded="true">  <i class="glyphicon glyphicon-tag"></i>
Manage Annotations <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" id="label-menu" role="menu">
        <div id="fixedArea">
            <li class="labelCurrentAnnotations">Current Annotations:</li>
            <li class="lbl checkbox">
                <label class="aLabel c1">
                    <input type="checkbox" class="cbAnno" checked>Concept</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c3">
                    <input type="checkbox" class="cbAnno" checked>Sentence</label>
            </li>
        </div>
        <div id="searchArea">
            <li class="divider"></li>
            <li class="labelHeading">Add new Annotation:</li>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search Annotation..."> <span class="input-group-btn">
    <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> </span></div>
            <!-- /search input -->
        </div>
        <div id="scrollArea">
            <li class="lbl checkbox">
                <label class="aLabel c2">
                    <input type="checkbox" class="cbAnno">Abbreviation</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c4">
                    <input type="checkbox" class="cbAnno">Abstract</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c5">
                    <input type="checkbox" class="cbAnno">Category</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c6">
                    <input type="checkbox" class="cbAnno">Chunk</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c7">
                    <input type="checkbox" class="cbAnno">ChunkNP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c8">
                    <input type="checkbox" class="cbAnno">ChunkPP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c9">
                    <input type="checkbox" class="cbAnno">ChunkVP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c10">
                    <input type="checkbox" class="cbAnno">Entity</label>
            </li>
        </div>
    </ul>
</div>

JS

// Manage Labels

$('#fixedArea input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            console.log('jetzt');
        } else {
            hf = "";
            hs = "";
            var hf = $('#fixedArea').outerHeight(true);
            var hs = $('#fixedArea').outerHeight(true);         
            $('#searchArea').css('margin-top', hf - 32 + 'px');
            $('#scrollArea').css('padding-top', hs + 70 + 'px');
            var text = $(this).parent().text();
            var color = $(this).parent().attr('class');
            $(this).closest('li').remove();
            $("#scrollArea").append('<li class="lbl checkbox"><label class="' + color + '"><input type="checkbox" class="cbAnno">'+ text + '</label></li>');
            console.log('jetzt');
        }
  });
 $('#scrollArea input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            hf = "";
            hs = "";
            var hf = $('#fixedArea').outerHeight(true);
            var hs = $('#fixedArea').outerHeight(true);
            var text = $(this).parent().text();
            var color = $(this).parent().attr('class');
            $(this).closest('li').remove();
            $('#searchArea').css('margin-top', hf + 32 + 'px');
            $('#scrollArea').css('padding-top', hs + 130 + 'px');
            $("#fixedArea").append('<li class="lbl checkbox"><label class="' + color + '"><input type="checkbox" class="cbAnno">'+ text + '</label></li>');
        } 
  });

Answer 1

您绑定到元素的事件不会自动添加到您之后放入的元素中。移动到div中的元素将不会与最初的元素具有相同的事件。

您可以使用委派事件来获取该功能。这是通过绑定周围元素上的事件，并指定其中的哪些元素应该使事件处于活动状态：

$('#label-menu').on('change', '#fixedArea input:checkbox',
  function() {
    ...

$('#label-menu').on('change', '#scrollArea input:checkbox',
  function() {
    ...

您还可以重写代码，以便将相同的事件绑定到所有复选框，并且只需将元素移动到右侧，取决于复选框的状态。移动元素而不是重新创建它们，以便它们保留事件绑定：

$('#label-menu input:checkbox').change(
  function(){
    var hf = $('#fixedArea').outerHeight(true);
    var hs = $('#fixedArea').outerHeight(true);
    if ($(this).is(':checked')) {
      $('#searchArea').css('margin-top', hf + 32 + 'px');
      $('#scrollArea').css('padding-top', hs + 130 + 'px');
      $("#fixedArea").append($(this).closest('li'));
    } else {
      $('#searchArea').css('margin-top', hf - 32 + 'px');
      $('#scrollArea').css('padding-top', hs + 70 + 'px');
      $("#scrollArea").append($(this).closest('li'));
    }
  }
);

复选框上的.change（）无法正常工作

1 个答案: