테스트 사이트 - 개발 중인 베타 버전입니다

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

museplay 6년 전 조회 1,889

HTML

</p>

<p><ul id="wrapper"></p>

<p>    <li></p>

<p>        <input type="text"></p>

<p>        <input type="text" value="" readonly></p>

<p>        <select></p>

<p>            <option value="123">선택1</option></p>

<p>            <option value="가나다">선택2</option></p>

<p>            <option value="abc">선택3</option></p>

<p>        </select></p>

<p>        <button type="button" class="apply_btn">적용</button></p>

<p>    </li></p>

<p></ul></p>

<p><button type="button" class="add_btn">추가하기</button></p>

<p>

 

JAVASCRIPT

</p>

<p>var add_li = $('#wrapper').html();</p>

<p>$('.add_btn').click(function(){</p>

<p>    $('#wrapper').append(add_li);</p>

<p>});</p>

<p>$(document).on('click','li',function(){</p>

<p>    $('.apply_btn').click(function(){</p>

<p>        var $val = $(this).closest('li').find('select').val();</p>

<p>        if($(this).closest('li').find('input').eq(1).val() == ''){</p>

<p>            $(this).closest('li').find('input').eq(1).val($val);</p>

<p>        } else {</p>

<p>            var $all_val = $(this).closest('li').find('input').eq(1).val();</p>

<p>            $(this).closest('li').find('input').eq(1).val($all_val + ',' + $val);</p>

<p>        }</p>

<p>    });</p>

<p>});</p>

<p>

 

안녕하세요.

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

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

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

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

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

도움 부탁드립니다^^

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

답변 2개

채택된 답변
+20 포인트
세크티
6년 전

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

</p>

<pre>
<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></pre>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

m
museplay
6년 전
답변 감사합니다 ^^ 좋은 참고가 됐어요~

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

6년 전

$(function(){

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

 

)}

로그인 후 평가할 수 있습니다

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

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

로그인