jquery 移动输入格式化所需字段的更改

Question

这是 fiddle :http://jsfiddle.net/rbmako69/t5qKs/12/

这里是表格:

<form id="form1" mrthod="get" action="#">
    <div date-role="fieldcontain" class="ui-hide-label">
        <label for="best_contact_method">Best Contact Method</label>
        <select data-theme="a" id="best_contact_method" name="best_contact_method" class="required" data-native-menu="false">
            <option>Best Contact Method</option>
            <option value="email">Email</option>
            <option value="daytime_phone">Daytime Phone</option>
            <option value="evening_phone">Evening Phone</option>
       </select>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="daytime_phone" id="daytime_phone_label">Daytime Phone</label>
        <input type="text" id="daytime_phone" name="daytime_phone" placeholder="Daytime Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="evening_phone" id="evening_phone_label">Evening Phone</label>
        <input type="text" id="evening_phone" name="evening_phone" placeholder="Evening Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="email" id="email_label">Email</label>
        <input type="text" id="email" name="email" placeholder="Email" />
    </div>
    <button type="submit" data-theme="a" name="submit" id="submit" value="validate">Validate</button>
</form>

该表单有 4 个元素、一个选择框、3 个文本输入和一个按钮。当您从选择中选择一个选项时，它会更改提交表单所需的字段。当您从下拉列表中选择一个选项时，您将看到输入字段的格式发生变化。验证工作正常，但我似乎无法弄清楚如何保持字段的格式不发生变化。

有什么建议吗？

Answer 1

您的代码中有一些错误，我将从 .ready 开始，它应该不与 jQuery Mobile 一起使用；或者，使用 pageinit。

其次，使用 .addClass 和 .removeClass 而不是使用 .attr('class', 'class')。因为使用最后一个会删除所有类并仅添加指定的类，这就是输入丢失格式/样式的原因。

另一个重要说明，对于 jQuery Mobile，最好在静态元素和 $( 的情况下使用 $('.selector').on('event', function () document).on('event', '.selector',function () 如果要将事件绑定(bind)到动态添加的元素

Demo

这是新代码。

$("#best_contact_method").on('change', function () {
 var item = $("select option:selected").val();
 switch (item) {
    case "email":
        $("#email").addClass("required email");
        $("#daytime_phone, #evening_phone").removeClass("required phoneUS");
        break;
    case "daytime_phone":
        $("#daytime_phone").addClass("required phoneUS");
        $("#email, #evening_phone").removeClass("required phoneUS email");
        break;
    case "evening_phone":
        $("#evening_phone").addClass("required phoneUS");
        $("#email, #daytime_phone").removeClass("required phoneUS email");
        break;
  }
 $("#form1").validate();
});

引用文献:

• Why .ready shouldn't be used with jQuery Mobile?
• jQuery Mobile events
• .addClass和 .removeClass