JQuery .replaceWith()가 갑자기 잘못된 요소에 새 요소를 추가하고 있습니까?

Question

이 사진은 정말 나를 괴롭 히고 있습니다. 파일 입력 필드를 "지우려면"replaceWith()을 사용하고 있습니다. 그러나, 그것을 대체 할 때, 그것은 틀린 장소에서 그것을 되돌아 가게한다. 그리고 나는 이유를 모른다. 더 이상 불가사의 한 것은 주말에 일을 그만두었을 때 대체품이 예상대로 정확하게 작동했기 때문에 제목에 "갑자기"라는 용어를 사용했습니다. 이제 나는 일하러 갑자기 돌아 오지 않습니다.

여기에 소스 HTML은 replaceWith()를 호출하기 전에의 :

<label>Audio</label> 
<i style="color:#888888;">MP3 or OGG format recommended</i> 
<br> 
<button id="clear_audio_input" style="display:none;">Clear</button> 
<input type="file" value="" name="source_audio" style="width:300px;"> 
<br> 
<div style="margin-top:15px;"> 
    <b>Current: </b> 
    <i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i> 
    <br> 
    <input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio"> 
    <span id="current_audio_info_a"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete"> 

는 현재 오디오를 삭제 하시겠습니까? 현재 오디오가 바뀝니다.

"source_audio"라는 FILE 입력 필드의 위치에 유의하십시오. "지우기"버튼 바로 뒤에 있습니다. 내가 replaceWith()를 호출 한 후

은 지금의 HTML은 다음과 같습니다

<label>Audio</label> 
<i style="color:#888888;">MP3 or OGG format recommended</i> 
<br> 
<button id="clear_audio_input" style="display: none;">Clear</button> 
<br> 
<div style="margin-top:15px;"> 
    <b>Current: </b> 
    <i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i> 
    <br> 
    <input type="file" value="" name="source_audio" style="width:300px;"> 
    <input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio"> 
    <span id="current_audio_info_a" style="display: inline;"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete"> 

는 현재 오디오를 삭제 하시겠습니까? 현재 오디오가 바뀝니다.

이제는 몇 줄 아래에 있고 다른 DIV 안에 있습니다.

$("#clear_audio_input").live("click", function() { 
    $("input[name='source_audio']").replaceWith($("input[name='source_audio']").val('').clone(true)); 
    $("#source_audio_value").val($("#current_audio_source").text()); 
    $(this).hide(); 
    $("#current_audio_info_a").show(); 
    $("#current_audio_info_b").hide(); 
    checkRequiredMedia(); 
    return false; 
}); 

여기에 기본적인 의도 된 워크 플로 : 여기

는 "지우기"버튼의 동작을 제어하는 ​​스크립트입니다. 로드 할 때 아직 지울 항목이 없으므로 지우기 단추가 숨겨집니다. 사용자가 파일을 선택하면 지우기 단추가 나타납니다. 버튼을 클릭하면 파일 입력을 지우고 (대체하여) 버튼이 다시 숨겨져 본질적으로 폼을로드시와 동일한 상태로 되돌립니다.

이 이상한 일이 일어나는 이유는 무엇입니까? (특히 며칠 전부터 발생하지 않았으므로 그 이후로 아무 것도 변경하지 않았기 때문에)?

Answer 1

두 입력의 이름이 source_audio이므로 문제가 발생했습니다. 이 문제를 해결하려면 두 입력 필드에 ID를 부여하거나 이름을 변경해야합니다. 예를 들어

:

$('#my_file_input').replaceWith('<input id="my_file_input" type="file" name="source_audio" />'); 
$('#my_hidden_file_input').val('');