jquery ajax複数のドロップダウンリストイベント

Question

いくつかの結果を得るために使用したいドロップダウンが2つあります。ユーザーが最初のドロップダウンを変更すると、2番目のドロップダウンメニューで選択オプションが変更されます。私は置き換えられる選択オプションを得ることができますが、イベントは2回目のドロップダウンで最初に起動されませんが、その後は徐々に発生します。

私はそれが実行されるたびに.htmlが新しいdomを作成していると思いますが、これをやめる方法はわかりません。何か案は？前もって感謝します。

$(document).ready(function(){ 
     $("form[name='search_form']").change(function(event){ 
     if($(event.target).is("#searchregionid")){ 
      regionid = $("#searchregionid").val(); 
      searchData = "searchregionid="+regionid; 
      searchFor(searchData); 
      getCountrySelection(searchData); 
     } 
     else if($(event.target).is("select[name='searchcountryid']")){ 
      $("select[name='searchcountryid']").change(function(){ 
       $("select[name='searchcountryid'] option:selected").each(function(){ 
        countryid = $("#searchcountryid").val(); 
        searchData = "searchcountryid="+countryid; 
        searchFor(searchData); 
       }); 
      }); 
     } 
    }); 
}); 

function searchFor(searchData){ 
    $.ajax({ 
     type: "POST", 
     url: "/s_city_index.php", 
     data: searchData, 
     success:function(msg){ 
      $(".indexList").ajaxComplete(function(event,request){ 
       if(msg.toString() != "searcherror") 
        $(".indexList").html(msg); 
       else 
        $(".indexList").html('No matching results.'); 
      }); 
     } 
    }); 
} 

function getCountrySelection(searchData){ 
    $.ajax({ 
     type: "POST", 
     url: "/s_coun_sel.php", 
     data: searchData, 
     success:function(msg){ 
      $("select[name='searchcountryid']").ajaxComplete(function(event,request){ 
       if(msg.toString() != "searcherror") 
        $("select[name='searchcountryid']").html(msg);     
       else 
        $("select[name='searchcountryid']").html('No matching results.');    
      }); 
     } 
    }); 
} 

Answer 1

ここでの問題は、成功コールバック内でajaxCompleteを定義していることです。 ajaxComplete関数は、すべてのajax呼び出しの後に実行されるGLOBALコールバックです。次のようなものを試してみてください。

function searchFor(searchData){ 
    $.post("/s_city_index.php", searchData, function(msg){ 
     if(msg.toString() != "searcherror"){ 
      $(".indexList").html(msg); 
     } else { 
      $(".indexList").html('No matching results.'); 
     } 
    }); 
} 

function getCountrySelection(searchData){ 
    $.post("/s_coun_sel.php", searchData, function(msg){ 
     if(msg.toString() != "searcherror"){ 
      $("select[name='searchcountryid']").html(msg);     
     } else { 
      $("select[name='searchcountryid']").html('No matching results.'); 
     } 
    }); 
}