ロードオプションサーバーから選択

Question

ボタンをクリックしたときに私のオプション選択メニューを更新する方法を理解しようとしています。 私はこの作業を$(#id).click(function(){});を使って行うことができますが、メニューからオプションを選択したときに呼び出される必要がある別の関数もあります。以下のコードは、選択メニューをクリアするので機能しません。これは、クリックイベントが1回目のクリックで2回、変更が発生した後で2回呼び出されたためです。

両方のイベントを使用できるように選択メニューを読み込むにはどうすればよいですか。おそらく、私はこれについて適切な方法をとっていない、私はまだ本当にajaxとjqueryの新しいです。私のコードの

例：

MyMarkup：

<div class="siteId"> Select Site:<select id="site" name="site" 
style="width: 60px"></select></div> 

はJavaScript：

getSiteId: function(){ // fill the option select menu 

     $.ajax({ 

       type: "POST", 
       url: "?do=getsiteid", 
       dataType: "json", 
       async: true, 

       success: function(jsonObj) { 

        var listItems= "";       
        listItems+= "<option value='empty'></option>";   // fill first entry with a blank value 

         for (var i in jsonObj){ 

           listItems+= '<option value=' + jsonObj[i].siteId + '>' + jsonObj[i].siteId + '</option>'; 
       } 
       $("#site").html(listItems); 
       } 
     }); 
}, 

マイイベント：

$(document).ready(function() { 

    $('.siteId').click(function(){ 
    Freight.getSiteId(); 
    }); 




    $('#site').change(function(){//event to load table based on user selection from menu 

var siteId = $("#site").attr('value'); 
nEditing = null; 
if(siteId != "empty"){ 
    $("#message").hide(); // hide message 
    $("#new").show();  // show button 
    $('#wrapper').empty(); // 
    $('#wrapper').replaceWith(Freight.tbl); 

    Freight.displayData(siteId); 

oTable = $('#grid').dataTable({ 
    "aoColumns": [ 
     /* Dest */ null, 
     /* Port Id */ {"bSearchable": false, 
         "bVisible": false}, 
        /* woodType */ {"bSearchable": false, 
         "bVisible": false}, 
     /* Cont Rate */ null, 
     /* Edit */ null 
    ]}); 
} 
    else{ 
    $("#wrapper").empty(); 
    $("#message").show(); // hide message 
    $("#new").hide();  // show button 

    } 
}); // end 



}); 

Answer 1

.clickハンドラがあなたの上にあるため。 siteId divはgですSELECTメニューを含むdiv内の何かをクリックすると呼び出されます。そのため、SELECTの.changeイベントもdivの.clickイベントを発生させます。私は、 "Select Site"テキストの周りにスパンを置き、クリックイベントをスパンに入れます。