Tools for Apache Cordova: JQueryMobile wraps input tags inside a head tag?

问题

Visual Studio 2013 Ultimate update 4, Tools for Apache Cordova CTP 3.0, building for Windows Phone 8.1

I'm searching for help/workarounds/magic to deal with the following:

Start with a blank ApacheCordova template app, it runs "fine".
Add a button input -- everything is still "fine"

But then include JQuery and JQuery.mobile and neither the <p> nor the <input> are rendered when running on the emulator or the device.?.?.?.???

<body>
<p>Hello, your application is ready!</p>
<input type='button' value='' />

<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>

<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/jquery.mobile-1.4.5.js"></script>
<script src="scripts/index.js"></script>
</body>

Looking at the DOM Explorer for index.html, we see why: our <p> and <input> have been wrapped in <head> when JQM did the enhancement.

<body class="ui-mobile-viewport ui-overlay-a">
    <head tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 667px;" data-url="/www/index.html">
        <p>Hello, your application is ready!</p>
        <head><input type="button" value=""></head>

        <!-- Cordova reference, this is added to your app when it's built. -->
        <script src="cordova.js"></script>
        <script src="scripts/platformOverrides.js"></script><script src="scripts/winstore-jscompat.js"></script>

        <script src="scripts/jquery-2.1.1.js"></script>
        <script src="scripts/jquery.mobile-1.4.5.js"></script>
        <script src="scripts/index.js"></script>
    </head>

    <head class="ui-loader ui-corner-all ui-body-a ui-loader-default"></head>
    <body class="ui-loader ui-corner-all ui-body-a ui-loader-default"></body>
</body>

Short of not using JQuery Mobile, does anyone have an idea how to "stop" this from happening? Once an input tag is introduced into the markup, JQM starts wrapping in head tags.

回答1:

JQM is incompatible with winstore-jscompat.js. So you can comment out <script src="scripts/platformOverrides.js"></script> or modify the winstore-jscompat.

It's enough to comment out the following lines in winstore-jscompat.js:

/*
cleansePropertySetter("innerHTML", function (propertyDescriptor, target, elements) {
  empty(target);
  for (var i = 0, len = elements.length; i < len; i++) {
    target.appendChild(elements[i]);
  }
});
*/

来源：https://stackoverflow.com/questions/27866049/tools-for-apache-cordova-jquerymobile-wraps-input-tags-inside-a-head-tag

标签

cordova

jquery-mobile

windows-phone

visual-studio-cordova