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

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

QA

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

본문

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개가 나올때도 있는데

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

도움 부탁드립니다^^

이 질문에 댓글 쓰기 :

답변 2

.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>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,128 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT