jQuery onChange事件在我的jQuery移动页面上触发了多次

Question

我的使用jquery onChange函数的JS代码在似乎应该仅触发一次时被触发多次。

我有四个jquery移动单选按钮，当您单击其中一个时，将对单击的单选按钮的值进行评估，然后重写页面URL以删除/添加正确的url字符串，然后通过AJAX通过我的loadResults（url）函数，然后显示更新的内容。

第一次单击其中一个单选按钮时，这似乎按预期方式工作，但是此后，似乎反复调用了loadResults，但我不知道为什么。

这是我的单选按钮的html代码：

        <fieldset data-role="controlgroup" id="proptype">
          <!--{if ($searchCriteria.openHouseSearch != 1 || $searchCriteria.latest != 1 )}-->              
                <input type="radio" name="propStatus" id="propStatus-active" value="activelistings" checked>
          <!--{else}-->
                <input type="radio" name="propStatus" id="propStatus-active" value="activelistings">
          <!--{/if}-->
          <label for="propStatus-active">Active Listings</label>      

          <!--{if ($searchCriteria.latest == 1 || $searchCriteria.propStatus == latest) }-->
                <input type="radio" name="propStatus" id="propStatus-new" value="latest" checked>
          <!--{else}-->
                <input type="radio" name="propStatus" id="propStatus-new" value="latest">
          <!--{/if}-->
          <label for="propStatus-new">New Listings</label>

          <!--{if $searchCriteria.openHouseSearch == 1}-->
                <input type="radio" name="propStatus" id="propStatus-openHouse" value="openHouseSearch" checked>
          <!--{else}-->
                <input type="radio" name="propStatus" id="propStatus-openHouse" value="openHouseSearch">
          <!--{/if}-->
            <label for="propStatus-openHouse">Open Houses</label>

          <!--{if $searchCriteria.areaSearch == 1}-->
                <input type="radio" name="propStatus" id="propStatus-areaSearch" value="areaSearch" onchecked>
          <!--{else}-->
                <input type="radio" name="propStatus" id="propStatus-areaSearch" value="areaSearch">
          <!--{/if}-->
            <label for="propStatus-areaSearch">Area Search</label>

        </fieldset>

这是我的jQuery javascript代码：

$ j（document）.on（'pagebeforeshow'，'#resultspage'，function（）{

//alert('this is fired'); 

    $j('#proptype input[type=radio]').change(function(e){
        //alert(url);
        //alert ('RADIOBUTTON VALUE IS: ' +$j(this).val() )
                var url = window.location.href; 
                if ($j(this).val() == "latest") { // New Listings
                    //alert('This is a new listings search');
                    document.getElementById('areainformation').style.display = 'none';
                    document.getElementById('resultsContents').style.display = 'block';
                    url = url.replace(/&activelistings=1/g,'');
                    url = url.replace(/&openHouseSearch=1/g,'');
                    url = url.replace(/&page=[0-9]+/g,'');
                    url = url.replace(/&areaSearch=1/g,'');
                    url += "&latest=1";
                    //alert('latest is value: ' +url);
                    loadResults(url);
                } else if ($j(this).val() == "openHouseSearch") { // Open Houses
                    // WHY IS THIS FIRED MULTIPLE TIMES AFTER YOU DO A NEW LISTINGS SEARCH AND THEN CHOOSE AN OPENHOUSE SEARCH??
                    //alert('This is an openHouse search');
                    document.getElementById('areainformation').style.display = 'none';
                    document.getElementById('resultsContents').style.display = 'block';
                    url = url.replace(/&activelistings=1/g,'');
                    url = url.replace(/&latest=1/g,'');
                    url = url.replace(/&propStatus=latest/g,'');
                    url = url.replace(/&page=[0-9]+/g,'');
                    url = url.replace(/&areaSearch=1/g,'');
                    url += "&openHouseSearch=1";
                    //alert('openHouseSearch is value: ' +url);
                    loadResults(url);
                } else { // All Active Listings or Area Search
                    if ($j(this).val() == "areaSearch") { // Area Search
                        //$j('#areainformation').style.display = 'block';
                        //$j('#resultsContents').style.display = 'none';
                        //alert('This is an area search');
                        document.getElementById('areainformation').style.display = 'block';
                        document.getElementById('resultsContents').style.display = 'none';
                    } else {
                        //alert('This is an all active listings search');
                        document.getElementById('areainformation').style.display = 'none';
                        document.getElementById('resultsContents').style.display = 'block';
                        url = url.replace(/&openHouseSearch=1/g,'');
                        url = url.replace(/&latest=1/g,'');
                        url = url.replace(/&propStatus=latest/g,'');
                        url = url.replace(/&page=[0-9]+/g,'');
                        url = url.replace(/&areaSearch=1/g,'');
                        url += "&activelistings=1";
                        //alert('doing activelisting: ' +url);
                        loadResults(url);
                    }
                }
      });

}）;

Answer 1

我猜您会从其他单选按钮中收到更改事件。 使用单选按钮组，您可以设置一个值并清除当前选定的值（这不会第一次发生，因为尚未选择任何内容）。

您可能可以通过取消事件来解决此问题。