그누보드 QA - 한번 클릭에 이벤트가 여러변 실행돼서 나와요...

한번 클릭에 이벤트가 여러변 실행돼서 나와요...

museplay 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.05.10 11:03:20 1492 (121.♡.♡.8)

본문

HTML


<ul id="wrapper">
    <li>
        <input type="text">
        <input type="text" value="" readonly>
        <select>
            <option value="123">선택1</option>
            <option value="가나다">선택2</option>
            <option value="abc">선택3</option>
        </select>
        <button type="button" class="apply_btn">적용</button>
    </li>
</ul>
<button type="button" class="add_btn">추가하기</button>

JAVASCRIPT


var add_li = $('#wrapper').html();
$('.add_btn').click(function(){
    $('#wrapper').append(add_li);
});
$(document).on('click','li',function(){
    $('.apply_btn').click(function(){
        var $val = $(this).closest('li').find('select').val();
        if($(this).closest('li').find('input').eq(1).val() == ''){
            $(this).closest('li').find('input').eq(1).val($val);
        } else {
            var $all_val = $(this).closest('li').find('input').eq(1).val();
            $(this).closest('li').find('input').eq(1).val($all_val + ',' + $val);
        }
    });
});

안녕하세요.

select에서 option을 선택하고 apply_btn을 누르면 value값이 한번만 들어가는게 아니고 여러번 들어갑니다.

어제 도움을 받아서 기존 value값 + 새로운 value값 이렇게 누적되는거 까진 적용이 됐는데요.

만약 첫번째 option인 <option value="123">선택1</option>을 선택하고 apply_btn을 누르면

123,123,123,123,123 이렇게 들어갑니다...게다가 4개가 나올때도 있고 6개가 나올때도 있는데

어떻게 하면 한개만 나오게 할 수 있을까요...?

도움 부탁드립니다^^

#그누보드5 #javascript

답변 2

세크티 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-05-10 11:11:31 115.♡.♡.91

.add_btn 클릭이벤트를 밖으로 빼야할거같네요



<script>
    var add_li = $('#wrapper').html();
    $('.add_btn').click(function(){
        $('#wrapper').append(add_li);
    });
    $(document).on('click','.apply_btn',function(){

            var $val = $(this).closest('li').find('select').val();
            if($(this).closest('li').find('input').eq(1).val() == ''){
                $(this).closest('li').find('input').eq(1).val($val);
            } else {
                var $all_val = $(this).closest('li').find('input').eq(1).val();
                $(this).closest('li').find('input').eq(1).val($all_val + ',' + $val);
            }
    
    });
</script>