버튼 클릭시 컨텐츠 추가

이 바이올린을 실행할 때마다 참조 오류가 발생합니다.버튼 클릭시 컨텐츠 추가

이 함수는 양식에 다른 라디오 버튼을 추가해야합니다.

도움이 될 것입니다.

감사

https://jsfiddle.net/RyeManship/2jtvjd28/

HTML

<section class="content"> 
<div class="radio"> 
    <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
    <input type="text" class="form-control" placeholder="Type Question Here"> 
    </label> 
</div> 
<div class="radio"> 
    <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
    <input type="text" class="form-control" placeholder="Type Question Here"> 
    </label> 
</div> 
</section> 
<div class="row"> 
    <button type="button" class="btn btn-success" onclick="javascript:AddQuestion()">Add</button> 
    <button type="button" class="btn btn-danger">Remove</button> 
    <button type="button" class="btn btn-info">Submit Question</button> 
</div>

자바 스크립트

function AddQuestion() { 
$(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>'); 
};

출처

2016-12-21 RyeGuy

안녕하세요, 그냥 자바 스크립트 옵션에서 변경 : 이미 jQuery를 사용하는 것처럼, 여기에 당신이 할 수있는 방법 머리가 감싸지 않아야 함) : https://jsfiddle.net/2jtvjd28/2/ – briosheje

https://jsfiddle.net/2jtvjd28/3/ 'Load' 대신' '에 코드를 추가하기 만하면됩니다. –

당신의 바이올린은 설정이 잘못입니다 때문입니다. on* 이벤트 속성을 사용할 때 함수는 window의 범위 내에 있어야하므로 JS 설정의 '로드 유형'을 onLoad에서 No Wrap - in <head>으로 변경해야합니다. 더 나은 솔루션은 완전히 어떤 오래된 이벤트가 전혀 속성을 사용하고 눈에 거슬리지 이벤트 핸들러로 교체하지 않을 것이라고

는

Fixed fiddle

참고. 이렇게하면 HTML과 JS가 완전히 연결이 끊어지기 때문에 문제가 훨씬 더 잘 분리됩니다. > "몸에 더 랩"을 설정 (또는 -> 부하 유형 -

$(function() { 
 
    $('.add').click(function() { 
 
    $(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section class="content"> 
 
    <div class="radio"> 
 
    <label> 
 
     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
 
     <input type="text" class="form-control" placeholder="Type Question Here"> 
 
    </label> 
 
    </div> 
 
    <div class="radio"> 
 
    <label> 
 
     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
 
     <input type="text" class="form-control" placeholder="Type Question Here"> 
 
    </label> 
 
    </div> 
 
</section> 
 
<div class="row"> 
 
    <button type="button" class="btn btn-success add">Add</button> 
 
    <button type="button" class="btn btn-danger">Remove</button> 
 
    <button type="button" class="btn btn-info">Submit Question</button> 
 
</div>

출처

2016-12-21 16:14:52

정말 도움을 주셔서 감사합니다! 필자의 바이올린을 업데이트했지만 제거 기능은 작동하지 않지만 콘솔에 오류가 발생하지는 않습니다. 어떤 제안? https://jsfiddle.net/RyeManship/2jtvjd28/5/ – RyeGuy

세 가지 문제가 있습니다. document.ready 핸들러에 코드를 넣어야합니다. 'this'는 클릭 된 버튼을 가리키고 그 행의 아무 것도 그 버튼의'parent()'가 아닙니다. '.content'는 버튼의 부모가 아니므로 위임 된 이벤트 핸들러로'.row'를 사용해야합니다. 마지막으로 추가 된 행을 제거하려는 경우 다음을 사용하십시오. https://jsfiddle.net/2jtvjd28/6/ –

당신은 그 사람입니다 !!! – RyeGuy

버튼 클릭시 컨텐츠 추가

답변

관련 문제