홈>

javascript - js에서 동적으로 생성 된 확인란에 대해 선택 및 선택 취소가 작동하지 않습니다

부트 스트랩 js와 css를 사용하여 Java 스크립트 확인란 트리에서 동적으로 만들었습니다. 선택 및 선택 취소가 작동하지 않음 : 여기에 이미지 설명 입력

두 번째 그림은 js에서 동적으로 생성 된 HTML입니다. 여기에 이미지 설명 입력 이것을 복사하고 html로 만들면 작동합니다. 동적으로 확인란 트리를 만드는 방법은 무엇입니까?

$(function() {
  $('input[type="checkbox"]').change(checkboxChanged);
  function checkboxChanged() {
    var $this = $(this),
        checked = $this.prop("checked"),
        container = $this.parent(),
        siblings = container.siblings();
    container.find('input[type="checkbox"]')
    .prop({
        indeterminate: false,
        checked: checked
    })
    .siblings('label')
    .removeClass('custom-checked custom-unchecked custom-indeterminate')
    .addClass(checked ? 'custom-checked' : 'custom-unchecked');
    checkSiblings(container, checked);
  }
  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
        all = true,
        indeterminate = false;
    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });
    if (all && checked) {
      parent.children('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');
      checkSiblings(parent, checked);
    } 
    else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
      parent.children('input[type="checkbox"]')
      .prop("checked", checked)
      .prop("indeterminate", indeterminate)
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
      checkSiblings(parent, checked);
    } 
    else {
      $el.parents("li").children('input[type="checkbox"]')
      .prop({
          indeterminate: true,
          checked: false
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass('custom-indeterminate');
    }
  }
});


* { margin: 0; padding: 0; }
#page-wrap {
  margin: auto 0;
}
.treeview {
  margin: 10px 0 0 20px;
}
ul { 
  list-style: none;
}
.treeview li {
  background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
  padding: 2px 0 2px 16px;
}
.treeview > li:first-child > label {
  /* style for the root element - IE8 supports :first-child
  but not :last-child ..... */
  
}
.treeview li.last {
  background-position: 0 -1766px;
}
.treeview li > input {
  height: 16px;
  width: 16px;
  /* hide the inputs but keep them in the layout with events (use opacity) */
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */ 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.treeview li > label {
  background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
  /* move left to cover the original checkbox area */
  margin-left: -20px;
  /* pad the text to make room for image */
  padding-left: 20px;
}
/* Unchecked styles */
.treeview .custom-unchecked {
  background-position: 0 -1px;
}
.treeview .custom-unchecked:hover {
  background-position: 0 -21px;
}
/* Checked styles */
.treeview .custom-checked { 
  background-position: 0 -81px;
}
.treeview .custom-checked:hover { 
  background-position: 0 -101px; 
}
/* Indeterminate styles */
.treeview .custom-indeterminate { 
  background-position: 0 -141px; 
}
.treeview .custom-indeterminate:hover { 
  background-position: 0 -121px; 
}


<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%;">
   
    <!-- changing values in row -->
    <input id="rowNumber" class="form-control " type="hidden">
    <div class="wrapper" style="height: auto; min-height: 100%; background-color: #ECEFF4;">
        <!-- Main content -->
        <section class="content">
           
            <div class="row">
                <div class="col-xs-12">
                    <!-- /.box -->
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">   
                            <button onclick="addCheckBox()">add</button>
                            <input id="check" name="checkBoxes">   
                            <div id="page-wrap">
                                <ul class="treeview">                                    
                                    <li>
                                        <input type="checkbox" name="short" id="short">
                                        <label for="short" class="custom-unchecked">Short Things</label>
                                        <ul id="cc">
                                           
                                        </ul>
                                    </li>
                                </ul>
                            </div>                            
                        </div>                       
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script type="text/javascript">
    function addCheckBox() {
        var listElement = document.getElementById('cc');
        var check_value = new Array();
        check_value[1] = "Yellow";
        check_value[2] = "Red";
        check_value[3] = "Green";
        var li, checkbox, label, br, a;
        var title = document.getElementById('check').value;
        for (var i = 1; i <= title; i++) {
            li = document.createElement("li");
            if (i == title)
            {
                li.className = "last";
            }
            checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = "short-" + i;
            checkbox.id = "short-" + i;
            label = document.createElement("label");
            label.htmlFor = "short-" + i;
            label.className = "custom-unchecked";
            label.setAttribute("class", "custom-unchecked");
            label.innerHTML = check_value[i];
            li.innerHTML += checkbox.outerHTML + label.outerHTML;
            listElement.appendChild(li);
            /*li.appendChild(checkbox);
            //li.appendChild(label);
            listElement.appendChild(li);
            listElement.appendChild(checkbox);
            listElement.appendChild(label); */
        }
    }  
</script>
</body>

javascriptcsstwitter-bootstrap

  • 답변 # 1

    @ Alx-lark가 말했듯이, 당신이 겪고있는 문제는 초기 페이지로드시 변경 이벤트에 바인딩하는 것이지만 이벤트 바인딩 작동 방식, 추가 된후속확인란 요소입니다 나중에 페이지에 바인딩되지 않습니다. 그의 답변에서 언급 한 해결책-모든 확인란의 바인딩을 해제 한 다음 가장 최근에 추가 한 것을 포함하여 모든 확인란의 바인딩을 다시 설정하십시오.

    추가 할 때 개별 확인란을 바인딩하거나 document 와 같이 항상 존재하는 요소를 더 높게 바인딩 할 수도 있습니다.  

    이것은 아마도 가장 쉬운 변경 일 것입니다.

    $('input[type="checkbox"]').change(checkboxChanged)   에 와이즈 비즈

    이벤트 위임이라고하며 https://learn.jquery.com/events/event-delegation/

    에서 확인할 수 있습니다. 와이즈 비즈 

    $(document).on('change', 'input[type="checkbox"]', checkboxChanged);


    
 
    Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
    


    function checkboxChanged() {
    var $this = $(this),
        checked = $this.prop("checked"),
        container = $this.parent(),
        siblings = container.siblings();
    container.find('input[type="checkbox"]')
    .prop({
        indeterminate: false,
        checked: checked
    })
    .siblings('label')
    .removeClass('custom-checked custom-unchecked custom-indeterminate')
    .addClass(checked ? 'custom-checked' : 'custom-unchecked');
    checkSiblings(container, checked);
  }
  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
        all = true,
        indeterminate = false;
    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });
    if (all && checked) {
      parent.children('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');
      checkSiblings(parent, checked);
    } 
    else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
      parent.children('input[type="checkbox"]')
      .prop("checked", checked)
      .prop("indeterminate", indeterminate)
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
      checkSiblings(parent, checked);
    } 
    else {
      $el.parents("li").children('input[type="checkbox"]')
      .prop({
          indeterminate: true,
          checked: false
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass('custom-indeterminate');
    }
  }
$(function() {
  $(document).on('change', 'input[type="checkbox"]', checkboxChanged);
  
});

  • 답변 # 2

    코드 관점에서 보면 모든 것이 올바르게 작동합니다.

    <올>

    페이지가로드 된 후 생성 된 DOM 요소에 연결된 이벤트

    추가 버튼을 클릭하여 새 DOM 요소를 추가하여 프로그램 적으로 표시합니다

    따라서 메모리 누수를 줄이려면 오래된 이벤트를 분리하고 새 이벤트를 만들어야합니다.

    당신의 * { margin: 0; padding: 0; } #page-wrap { margin: auto 0; } .treeview { margin: 10px 0 0 20px; } ul { list-style: none; } .treeview li { background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat; padding: 2px 0 2px 16px; } .treeview > li:first-child > label { /* style for the root element - IE8 supports :first-child but not :last-child ..... */ } .treeview li.last { background-position: 0 -1766px; } .treeview li > input { height: 16px; width: 16px; /* hide the inputs but keep them in the layout with events (use opacity) */ opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ } .treeview li > label { background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat; /* move left to cover the original checkbox area */ margin-left: -20px; /* pad the text to make room for image */ padding-left: 20px; } /* Unchecked styles */ .treeview .custom-unchecked { background-position: 0 -1px; } .treeview .custom-unchecked:hover { background-position: 0 -21px; } /* Checked styles */ .treeview .custom-checked { background-position: 0 -81px; } .treeview .custom-checked:hover { background-position: 0 -101px; } /* Indeterminate styles */ .treeview .custom-indeterminate { background-position: 0 -141px; } .treeview .custom-indeterminate:hover { background-position: 0 -121px; } 에서 몇 마디로  새 요소를 만든 후 기능을 추가해야합니다.

    <body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%;">
   
    <!-- changing values in row -->
    <input id="rowNumber" class="form-control " type="hidden">
    <div class="wrapper" style="height: auto; min-height: 100%; background-color: #ECEFF4;">
        <!-- Main content -->
        <section class="content">
           
            <div class="row">
                <div class="col-xs-12">
                    <!-- /.box -->
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">   
                            <button onclick="addCheckBox()">add</button>
                            <input id="check" name="checkBoxes">   
                            <div id="page-wrap">
                                <ul class="treeview">                                    
                                    <li>
                                        <input type="checkbox" name="short" id="short">
                                        <label for="short" class="custom-unchecked">Short Things</label>
                                        <ul id="cc">
                                           
                                        </ul>
                                    </li>
                                </ul>
                            </div>                            
                        </div>                       
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script type="text/javascript">
    function addCheckBox() {
        var listElement = document.getElementById('cc');
        var check_value = new Array();
        check_value[1] = "Yellow";
        check_value[2] = "Red";
        check_value[3] = "Green";
        var li, checkbox, label, br, a;
        var title = document.getElementById('check').value;
        for (var i = 1; i <= title; i++) {
            li = document.createElement("li");
            if (i == title)
            {
                li.className = "last";
            }
            checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = "short-" + i;
            checkbox.id = "short-" + i;
            label = document.createElement("label");
            label.htmlFor = "short-" + i;
            label.className = "custom-unchecked";
            label.setAttribute("class", "custom-unchecked");
            label.innerHTML = check_value[i];
            li.innerHTML += checkbox.outerHTML + label.outerHTML;
            listElement.appendChild(li);
            /*li.appendChild(checkbox);
            //li.appendChild(label);
            listElement.appendChild(li);
            listElement.appendChild(checkbox);
            listElement.appendChild(label); */
        }
    }  
</script>
</body>

  • 답변 # 3

    나를 위해 문서 후 컨테이너를 타겟팅해야했습니다

    addCheckBox()
    $('input[type="checkbox"]').off('change'); // detach event $('input[type="checkbox"]').on('change', checkboxChanged); // add new event

관련 자료

  • 이전 python - 로봇 프레임 워크에서 DB 쿼리 결과를 연결하는 방법
  • 다음 vue.js - laravel vue js thisformpost (url)가 get 메소드로 자동 변환되는 이유