jsery移动多页上的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不适用于 $（文档）.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 1.7以来已弃用jQuery live（）函数并从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。