복세편it
30
2020-11-23 10:50:13
2
192

제이쿼리 기초 질문드립니다


안녕하세요!

퇴근 후에 독학으로 제이쿼리를 연습하고 있는데 풀리지 않는 부분이 있어 질문 드리고 싶습니다

제이쿼리와 부트스트랩을 이용해서 구현하려고 하는데요


1. 1번 모달창을 열고 input에 숫자 입력해서 확인버튼 클릭

2. input에 입력된 숫자만큼 div가 생성

ex) 20입력하고 확인 누르면 아래 이미지처럼 div가 20개 생성


3. 생성된 div중 아무거나 클릭하면 2번 모달창이 열림

4. 2번 모달창 input에 이름과 날짜를 지정해서 확인버튼 클릭

5. 2번 모달창에 입력한 값이 div에 넣어지도록 구현


현재 4번까지는 됐는데 5번에서 div is not defined at HTMLButtonElement.<anonymous> 에러가 뜹니다 ㅠㅠ


$(document).ready(function () {
  // 출력 버튼
  $("#btn").click(function () {
    var number = $("#number").val();
    var num = document.getElementById('number_area'); //결과 출력
    num.innerHTML = "";
    if (number < 1) {
      alert("숫자를 입력해 주세요.");
      $("#number").focus();
    }
    //입력된 숫자만큼 div로 출력
    $("#number_area").empty();
    for (var i = 1; i <= number; i++) {
      var div = document.createElement('container');
      var numb = $('#number_area').val();
      div.innerHTML = '<div class="container"><div class="col-sm-1" type="button" data-toggle="modal" data-target="#userModalCenter"><a class="name" href="#">NAME</a></div>';
      num.appendChild(div);
    }
  });
  $("#btn2").click(function (e) {
    e.preventDefault();
    var userName = $(this).parents('.modal-content').find(".modal-body input[name='userName']").val();
    var userData = $(this).parents('.modal-content').find(".modal-body input[name='userData']").val();
    div.getElementById(userName, userData);
  })
});


노란 부분이 input에 입력된 숫자만큼 div가 생성되도록 구현한 부분인데

마지막 빨간 밑줄 부분을 노란 밑줄 부분과 어떻게 융합시켜 응용해야 할지 모르겠네요 ㅠㅠ






0
  • 답변 2

  • 복세편it
    30
    2020-11-23 10:51:42

    앗 죄송합니다 밑줄 색이 안보이네요 ㅠㅠ 17번 줄이 input에 입력된 숫자만큼 div가 생성되도록 구현한 부분이고 24번째 줄을 17번 줄과 어떻게 융합시켜 응용해야 할지 모르겠다는 뜻이였습니다

  • 밥도둑계장
    758
    2020-11-23 11:56:43

    말그대로 div 선언도 안됬는데 div 가뭐냐 라는거 같습니다.


    24라인 div.get 부분에 div 선언 안되어있는거같네요


    그리고 동적으로 추가된 element 는 $('#id').click 형식의 이벤트리스너 동작 하지않는 경우가 많아요

    $(document).on 형식으로 하시는게 좋을거같아요

  • 로그인을 하시면 답변을 등록할 수 있습니다.