jQuery觸發器更改事件不起作用

Question

我遇到了JavaScript代碼問題，我想在加載頁面時觸發更改事件，它曾用於本地工作，但現在它已聯機並且沒有任何反應。

這裏是我的代碼： （有一些PHP代碼，它工作正常）

$("#city").change(function() { 
    console.log("city changed..."); 
    var city = $("#city option:selected").val(); 
    $.get(
     "ajax.php", 
     { 
      page: "venues", 
      city: city 
     }, 
     function (data) { 
      $("#venue").empty(); 
      $("#venue").append('<option selected disabled>--</option>'); 
      for(var i = 0; i < data.venues.length; i+=1) { 
       if (data.venues[i].id == <?php print $concert->getVenue()->getId(); ?>) { 
        $("#venue").append('<option value="'+data.venues[i].id+'" selected>'+data.venues[i].name+'</option>'); 
       } else { 
        $("#venue").append('<option value="'+data.venues[i].id+'">'+data.venues[i].name+'</option>'); 
       } 
      } 
      $("#label-venue").visible(); 
      $("#venue").visible(); 

      /*if (controlForm()) 
       $("#submit").removeProp("disabled"); 
      else 
       $("#submit").addProp("disabled");*/ 
     } 
    ); 
}); 

$("#country").change(function() { 
    console.log("country changed..."); 
    var country = $("#country option:selected").val(); 
    $("#country-city").html($("#country option:selected").html()); 
    $.get(
     "ajax.php", 
     { 
      page: "cities", 
      country: country 
     }, 
     function (data) { 
      $("#city").empty(); 
      $("#city").append('<option selected disabled>--</option>'); 
      $("#venue").empty(); 
      $("#venue").append('<option selected disabled>--</option>'); 
      for(var i = 0; i < data.cities.length; i+=1) { 
       if (data.cities[i].id == <?php print $concert->getVenue()->getCity()->getId(); ?>) { 
        $("#city").append('<option value="'+data.cities[i].id+'" selected>'+data.cities[i].name+'</option>'); 
       } else { 
        $("#city").append('<option value="'+data.cities[i].id+'">'+data.cities[i].name+'</option>'); 
       } 
      } 
      $("#label-city").visible(); 
      $("#city").visible(); 
      $("#city").trigger("change"); 
     } 
    ); 
}); 

function init() { 
    $.get(
     "ajax.php", 
     { 
      page: "countries" 
     }, 
     function (data) { 
      $("#country").empty(); 
      $("#country").append('<option selected disabled>--</option>'); 
      for(var i = 0; i < data.countries.length; i+=1) { 
       if (data.countries[i].id == <?php print $concert->getVenue()->getCity()->getCountry()->getId(); ?>) { 
        $("#country").append('<option value="'+data.countries[i].id+'" selected>'+data.countries[i].name+'</option>'); 
       } else { 
        $("#country").append('<option value="'+data.countries[i].id+'">'+data.countries[i].name+'</option>'); 
       } 
      } 
      $("#country").trigger("change"); 
     } 
    ); 
} 

$("#country-dismiss").click(function() { 
    $("#country-name-en").val(""); 
    $("#country-name-nl").val(""); 
    $("#country-name-de").val(""); 
}); 

$("#city-dismiss").click(function() { 
    $("#city-name-en").val(""); 
    $("#city-name-nl").val(""); 
    $("#city-name-de").val(""); 
}); 

$("#venue-dismiss").click(function() { 
    $("#venue-name").val(""); 
    $("#venue-texte").val(""); 
    $("#venue-website").val(""); 
}); 

$("#country-submit").click(function() { 
    console.log("adding country"); 
    var name_en = $("#country-name-en").val(); 
    var name_nl = $("#country-name-nl").val(); 
    var name_de = $("#country-name-de").val(); 

    $.post(
     "ajax.php?page=add_country", 
     { 
      en: name_en, 
      nl: name_nl, 
      de: name_de 
     }, 
     function (data) { 
      init(); 
      console.log(data); 
     } 
    ); 

}); 

$("#city-submit").click(function() { 
    var name_en = $("#city-name-en").val(); 
    var name_nl = $("#city-name-nl").val(); 
    var name_de = $("#city-name-de").val(); 
    var country = $("#country option:selected").val(); 

    $.post(
     "ajax.php?page=add_city", 
     { 
      country: country, 
      en: name_en, 
      nl: name_nl, 
      de: name_de 
     }, 
     function (data) { 
      $("#country").trigger("change"); 
     } 
    ); 
}); 

$("#venue-submit").click(function() { 
    var name = $("#venue-name").val(); 
    var address = $("#venue-address").val(); 
    var website = $("#venue-website").val(); 
    var city = $("#city option:selected").val(); 

    $.post(
     "ajax.php?page=add_venue", 
     { 
      city: city, 
      name: name, 
      address: address, 
      website: website 
     }, 
     function (data) { 
      $("#city").trigger("change"); 
     } 
    ); 
}); 

$(document).ready(function() { 
    (function($) { 
     $.fn.invisible = function() { 
      return this.each(function() { 
       $(this).css("visibility", "hidden"); 
      }); 
     }; 
     $.fn.visible = function() { 
      return this.each(function() { 
       $(this).css("visibility", "visible"); 
      }); 
     }; 
    }(jQuery)); 
    init(); 
}); 

我希望有人能夠看到我犯了一個錯誤（或幾個）。謝謝！

Answer 1

你可以通過定義功能避免$().trigger使用在全局命名空間被用作事件處理程序（或如果你擔心添加屬性到全局對象的包裝功能）。

通過命名您定義的函數來添加事件處理函數，並且當您需要觸發事件處理函數時，您只需調用該函數。

我給你舉個例子：

function countryChange() { 
    ... 
} 

$('#country').on('change', countryChange); 

function init() { 
    ... 
    countryChange(); 
} 

$(document).ready(function() { 
    init(); 
} 

Answer 2

$(".target").change(function() { 
    alert("Handler for .change() called."); 
}); 

Answer 3

你必須把你的改變事件的$回調函數內（文件）。就緒（），在那裏你觸發它們之前的任何地方。

$(document).ready(function(){ 

    $(selector).change(function(){ 
      ... 
    }); 

    $(selector).trigger("change"); //or $(selector).change(); 

}); 

我強烈建議從未綁定ready事件之外的選擇。

Answer 4

我放置$（選擇器）.trigger（「change」）後，我的問題得到解決。在$（document）.ready（）函數中。我的整個文檔是由JS創建的。