Question

我一直在寻找解决我在表单上遇到的冲突但似乎无法解决的问题。我有一个使用jquery 1.10.2和jquery.mobile-1.3.2的表单。我有一个用jquery编写的外部脚本，如果我禁用jquery.mobile可以很好地工作，不幸的是这会杀死表单的大部分内容。

我试图将noConflict添加到jquery但无济于事。此外，如果我切换jquery和jquery.mobile的顺序表单中断。我如何让脚本与jquery.mobile一起使用？

HTML

        <div id="FieldBlank1" class="clonedInput">
                  <h2 id="reference" name="reference" class="heading-reference">Blank #1</h2>

<fieldset>
   <label class="label_QASample" for="QASampleID">QA Sample ID:</label>
   <input class="input_QASample" type="text" name="QASampleID" id="QASampleID" value="">       </fieldset>
 <div data-role="controlgroup" data-mini="true" data-type="horizontal">
  <fieldset class="radio entrylist">
   <label class="label_radio" for="cCollection">Collection Method</label><br />
      <label><input type="radio" id="cradGrab" value="cCollectionGrab" name="cCollection" class="input_radio">Grab</label>
      <label><input type="radio" id="cradEWI" value="cCollectionEWI" name="cCollection" class="input_radio">EWI</label>
 </fieldset>
            </div> 
            <fieldset>   
   <label class="label_analysis" for="analysis">Analyte:</label>
        <select class="select_analysis" name="analysis" id="analysis" data-iconpos="left" data-icon="grid">
     <option value="" selected="selected" disabled="disabled">
                            Select</option>
           <option value="TN">TN</option>
           <option value="TP,NO2+3">TP,NO2+3</option>
           <option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option>
           </select>  </fieldset>
  <fieldset>
       <label class="label_preserve" for="preserve">Preserved</label>
    <select class="select_preserve" name="preserve" id="preserve" data-iconpos="left" data-icon="grid">
        <option value="" selected="selected" disabled="disabled">
                            Select</option>
           <option value="HNO3">HNO&#8323;</option>
           <option value="H2SO4">H&#8322;SO&#8324;</option>
                   </select></fieldset> 
       <div id="addDelButtons">
      <input type="button" data-theme="b" data-icon="plus" id="btnAdd" value="ADD FIELD BLANK">
       <input type="button" data-theme="b" data-icon="delete" id="btnDel" value="Remove the section above">

外部脚本

  $(function () {
     $('#btnAdd').click(function () {
    var num = $('.clonedInput').length,
        newNum = new Number(num + 1),
        newElem = $('#FieldBlank' + num).clone().attr('id', 'FieldBlank' + newNum).fadeIn('slow'); 


    newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Blank #' + newNum);

// text
    newElem.find('.label_QASample').attr('for', 'ID' + newNum + '_QASampleID');
    newElem.find('.input_QASample').attr('id', 'ID' + newNum + '_QASampleID').attr('name', 'ID' + newNum + '_QASampleID').val('');

// select
    newElem.find('.label_analysis').attr('for', 'ID' + newNum + '_analysis');
    newElem.find('.select_analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val('');

    // select
    newElem.find('.label_preserve').attr('for', 'ID' + newNum + '_preserve');
    newElem.find('.select_preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val('');

    // radio
    newElem.find('.label_radio').attr('for', 'ID' + newNum + '_cCollection');
    newElem.find('.input_radio').attr('id', 'ID' + newNum + '_cCollection').attr('name', 'ID' + newNum + '_cCollection').val([]);

     $('#FieldBlank' + num).after(newElem);

    $('#btnDel').attr('disabled', false);

     if (newNum == 5) $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
   });

$('#btnDel').click(function(){
    // confirmation
    if (confirm("Are you sure you wish to remove this section of the form? Any information it contains will be lost!")) {
        var num = $('.clonedInput').length;
        // how many "duplicatable" input fields we currently have
        $('#FieldBlank' + num).slideUp('slow', function () {
            $(this).remove();
            // if only one element remains, disable the "remove" button
            if (num - 1 === 1) $('#btnDel').attr('disabled', true);
            // enable the "add" button
            $('#btnAdd').attr('disabled', false).prop('value', "ADD FIELD BLANK");
        });
    }
    return false;
           $('#btnAdd').attr('disabled', false);
});

$('#btnDel').attr('disabled', true);
});

如何解决jquery和jquery mobile之间的冲突

0 个答案: