채택완료

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

2019-05-10 (금) 11:03:20 2,073

HTML

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

Copy
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개 / 댓글 1개

채택된 답변
+20 포인트

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

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

답변에 대한 댓글 1개

답변 감사합니다 ^^ 좋은 참고가 됐어요~

$(function(){

// 요부분애 감싸 해보세요.

)}

답변을 작성하려면 로그인이 필요합니다.