javascript - JQuery .replaceWith() 突然将新元素放在错误的位置？

Question

这个问题真的让我很困惑。我正在使用 replaceWith() 来“清除”文件输入字段。然而，当它替换它时，它又把它放回了错误的地方，我不知道为什么。我在标题中使用了“突然”这个词，因为更神秘的是，当我周末停止工作时，替代品完全按照预期工作。现在我回去工作了，突然就不行了。

这是调用 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>
<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”的文件输入字段的位置。它就在“清除”按钮之后。

现在，在我调用 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('');