javascript - jquery mobile multipage上的jsignature未正确启动

Question

我正在将 3 个 jsignature div 加载到我的 jquery 移动应用程序中。当我将它们加载到某些页面时，它们会显示并正常工作：

但是当它们被加载到其他页面时，div 会显示为一个被压扁的高度并且对触摸没有响应：

我正在页面底部使用文档就绪功能加载它们，这看起来不错：

<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>

<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
<div id="gcsig" style="width:600px; height:150px;"></div>
<div id="inspsig" style="width:600px; height:150px;"></div>
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text"  name="_fid_210" id="_fid_210" />
</form>
    </div></div>

<script>
    $(document).ready( function(){
        $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    });
</script>

但是当我更改为这个时，每个签名都加载到自己的页面中，它们会丢失大小和功能：

div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>

<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text"  name="_fid_210" id="_fid_210" />
<a data-theme="a" href="#fcmsignature" data-role="button" data-transition="slidefade" data-inline="true">Field CM Signature</a><br>
<a data-theme="a" href="#gcsignature" data-role="button" data-transition="slidefade" data-inline="true">Contractor Signature</a><br>
<a data-theme="a" href="#inspsignature" data-role="button" data-transition="slidefade" data-inline="true">Inspector Signature</a>
</form>
</div></div>

<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>

<div id="gcsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#gcsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>Contractor Signature</h1>
</div>
<div data-role="content">
<div id="gcsig" style="width:600px; height:150px;"></div>
</div></div>

<div id="inspsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#inspsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>Inspector Signature</h1>
</div>
<div data-role="content">
<div id="inspsig" style="width:600px; height:150px;"></div>
</div></div>


<script>
    $(document).ready( function(){
        $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    });
</script>

我尝试在签名页面上使用 pageinit，但得到了相同的结果：

<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<script>
$('#fcmsignature').live('pageinit',function(event){
    $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>

我不确定为什么它们会在一个子页面中工作，而不是另一个。有什么想法吗？

• 更新：直接刷新 /index.html#fcmsignature 可以正确显示签名。所以这个问题在某种程度上与签名的启动有关——这就是我尝试 pageinit 的原因（没有成功）。我还在按钮上尝试了 data-transition="none" ，但没有变化。

Answer 1

试试这个语法：

$('#fcmsignature, #gcsignature, #inspsignature').live('pageshow',function(e,data){
    $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});

此语法将负责加载 jQuery 和 jQuery mobile，并且仅当页面fcmsignature、#gcsignature、#inspsignature即将显示时才有效。并且因为您每页使用一个签名，所以像这样使用它：

$('#fcmsignature').live('pageshow',function(e,data){
        if($('#fcmsig').find('.jSignature').length == 0){
            $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

$('#gcsignature').live('pageshow',function(e,data){
        if($('#gcsig').find('.jSignature').length == 0){
            $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

$('#inspsignature').live('pageshow',function(e,data){
        if($('#inspsig').find('.jSignature').length == 0){
            $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

jQM 不是为使用$(document).ready( function(){而构建的。阅读我的另一篇文章以了解原因：https ://stackoverflow.com/a/14010308/1848600

Answer 2

只是为了澄清其他遇到此问题的人，将 jSignature 附加到“pageshow”事件对我有用。

    $("#signpage").live("pageshow",function(e,data){
      if($("#signature").find(".jSignature").length == 0){
                    $("#signature").jSignature();
      }
    });

Answer 3

为了更新其他答案，jQuery live() 函数自 jQuery 1.7 起已被弃用，自 jQuery 1.9 起已被删除。现在您将要使用 jQuery Mobile“pagecontainershow”事件处理程序并检查您当前所在的页面，然后执行if其他答案中建议的块，如下所示：

$(document).on("pagecontainershow", function(evt, ui){
    var pageID = $('body').pagecontainer('getActivePage').prop('id');

    if(pageID == 'signaturePage'){
        if($("#signatureDiv").find(".jSignature").length == 0){
            $("#signatureDiv").jSignature();
        }
    }
}

此方法适用于 jQuery 1.11.3 和 jQuery Mobile 1.4.5。