Question

我有一个标准的jquery Mobile popUp，其中包含一个表单：

<div data-role="popup" id="costCentreClientEditPopup">
    <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>
    <form id="costCentreClientEditForm" enctype="multipart/form-data">
        <div class="ui-grid-a ui-responsive">
            <div class="ui-block-a">
                <div class="jqm-block-content">
                    <h3>Details</h3>
                    <div data-role="fieldcontain"><select name="areaLevelOneID"      id="int_areaLevelOneID"></select></div>
                    <div data-role="fieldcontain"><select name="areaLevelTwoID" id="int_areaLevelTwoID"></select></div>
                    <div data-role="fieldcontain"><select name="costCentreClientClassID" id="int_costCentreClientClassID" multiple="multiple" data-native-menu="false">
                        <option>Select Activity:</option><option value="0"></option></select></div>
                    <div data-role="fieldcontain" id="costCentreClientGroupIDDiv">
                        <select name="costCentreClientGroupID" id="int_costCentreClientGroupID">
                          <option value="0">No Group</option></select>
                    </div>
                    <div data-role="fieldcontain"><label for="str_firstName">name:</label><input type="text" value="" name="firstName" id="str_firstName" /></div>
                    <div data-role="fieldcontain"><label for="str_surname">surname:</label><input type="text" value="" name="surname" id="str_surname" /></div>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <legend>male:</legend>
                            <input type="checkbox" name="gender" id="bool_gender" />
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="jqm-block-content">
                    <div data-role="fieldcontain"><label for="int_cellNumber">cell n&deg;</label><input type="text" name="cellNumber" id="int_cellNumber" /></div>
                    <div data-role="fieldcontain" id="ageDiv"><label for="int_age">age:</label><input type="text" width="40px" name="age" id="int_age" /></div>
                    <div data-role="fieldcontain"><select name="costCentreClientIDClassID" id="int_costCentreClientIDClassID"></select></div>
                    <div id="costCentreClientIDDiv">    
                        <div data-role="fieldcontain"><label for="str_costCentreClientID">ID:</label><input type="text" name="costCentreClientID" id="str_costCentreClientID" /></div>
                    </div>
                    <div id="dateHolder">
                        <div id="participantTrainingDate"></div>
                    </div>
                    <div id="pageInfoImageDiv">
                        <div id="pageInfoTextDiv"></div>
                    </div>    
                    <button id="costCentreClientDataInsertButton" class="ui-btn-b ui-shadow ui-icon-plus ui-btn-icon-right">Add</button>
                </div>
            </div> 
        </div>   
    </form>
    </div><!-- end of popUp -->

Int_areaLevelOne和int_areaLevelTwo都附加了更改事件

 $('#int_areaLevelOneID').on("change", function(event){
    $('#int_areaLevelTwoID').empty();
    $(xmlDoc).find('areaLevelTwo').each(function(){
        $(this).find('entity').each(function(){
            if($(this).attr("int_areaLevelOneID")==$('#int_areaLevelOneID').val()){
                $('#int_areaLevelTwoID').append($('<option></option>').val($(this).attr("int_entityID")).html($(this).text()));
                }
            });
        }); 
    $("#int_areaLevelTwoID").val($("#int_areaLevelTwoID option:first").val()).change();
    });

  $('#int_areaLevelTwoID').on("change", function(event){
    $('#int_costCentreClientGroupID').empty();
    $('#int_costCentreClientGroupID').append($('<option></option>').val(0).html('No Sector'));
    $(xmlDoc).find('costCentreClientGroups').each(function(){
        $(this).find('entity').each(function(){
            if($(this).attr("int_costCentreAreaID") == $('#int_areaLevelTwoID').val()){
                $('#int_costCentreClientGroupID').append($('<option></option>').val($(this).attr("int_entityID")).html($(this).text()));
                }
            });
        });
    });

在

上触发时，这两个事件都会触发

$(window.document).ready(function(){.....
 ....
$("#int_areaLevelOneID").val($("#int_areaLevelOneID option:first").val()).change();
$("#int_areaLevelTwoID").val($("#int_areaLevelTwoID option:first").val()).change();
});

但这些事件都不会在弹出窗口中触发

popupbeforeopen: function(event, ui){ 
    $("int_areaLevelOneID").val($("#dataSetTwoDiv").find(".entitySelected").attr("id")).change();
                                       $("int_areaLevelTwoID").val(int_areaLevelTwoID).change();        
}
 where $("#dataSetTwoDiv").find(".entitySelected").attr("id") and int_areaLevelTwoID are both integers.

或

popupafteropen: function(event, ui){ 

        }

Answer 1

尝试在正常逻辑和弹出特定逻辑之间添加这种代码安静

$("div#costCentreClientEditPopup").off();

这已禁用已指定的popup元素中的所有事件，之后您可以添加新的事件逻辑

或者如果您需要根据弹出窗口可见性更改元素逻辑，则将if-else语句添加到事件侦听器函数

jquery更改事件不会弹出窗口

1 个答案: