jquery移动输入文件未更新img

我有一个jquery移动页面，上面有一个img控件

<div data-role="page" id="pageAvitarUpload">
    <div data-role="header">
        <h2 style="font-weight: bold; font-size: .75em;" id="dlgHeader">Choose an Image file</h2>
    </div>

    <div data-role="main" class="ui-content">
        <input type="file" id="fileAvitar" accept="image/*" />

        <div style="width:100%; text-align:center;">
            <p>Preview</p>
            <img id="userImage" src="./images/UserPhoto.png" alt="User Photo" width="90" height="90" style="margin:0 auto; vertical-align:middle;" />
        </div>

        <input type="button" id="btnUploadAvitar" value="Upload" />
    </div>
</div>

我的代码运行良好，但img从未更新。我在拔我漏掉的一点头发，因为我知道那一定是什么蠢事。更多信息是，此窗口在打开时作为对话框窗口调用

$("#btnAvitar").on("click", function () {
    $(':mobile-pagecontainer').pagecontainer('change', '#pageAvitarUpload', { role: "dialog" });
})

我认为这可能是问题所在，但即使我把它从对话中去掉，它还是失败了。请帮忙，因为我已经看了几个小时了，我迷路了。我已经阅读了我能找到的每一篇文章，并以5种不同的方式重新编写了这段代码，但就是无法让它工作

---

TIA

任何人都没有提供任何信息？请提供一个JSFIDLE示例或指向示例页面的链接。你在控制台上看到了什么错误？我发现了，正如我所料，是椅子和键盘之间的一个松动的螺母。我的页面中有两个同名的img对象。显然是一个剪切粘贴的问题。谢谢Twisty的帮助，非常感谢，我希望有一天我能报答你的帮助。任何人都没有。请提供一个JSFIDLE示例或一个示例页面的链接。你在控制台上看到了什么错误？我发现了，正如我所料，是椅子和键盘之间的一个松动的螺母。我的页面中有两个同名的img对象。显然是一个剪切粘贴的问题。非常感谢Twisty的帮助，我希望有一天我能报答你的帮助。

$("#btnAvitar").on("click", function () {
    $(':mobile-pagecontainer').pagecontainer('change', '#pageAvitarUpload', { role: "dialog" });
})