Question

所以我现在有以下代码：

<form action="">


<div id="term"><select name="s2" >
<option name="" value="">--Select Term--</option>
</select></div>

<div id="dept"><select name="s3"  >
<option name="" value="">--Select Department--</option> 
</select></div>

<div id="course"><select id='selCourse' value="">
<option name="" value="">--Select Course--</option> 
</select></div>

<div id="sec"><select id='selSec' value="">
<option name="" value="">--Select Section--</option>
</select></div>

<script>
    $('#term').load('fetchcourses.php?');
    alert('It Works');
    </script>
    <script>
    $('[name=s2]').change(function() {
      $('#dept').load('fetchcourses.php?term='+$(this).val());
    });
    </script>

它可以正常工作，但是，如果我删除alert('It Works')代码将正确加载第一行的数据，但.change（）没有任何反应。

我在这里和其他地方看过类似的问题，显然它与异步代码有关？但是，我真的不明白这意味着什么，或者如何解决它。任何帮助表示赞赏！

Answer 1

变化：

$('[name=s2]').change(function() {

为：

$('[name=s2]').live('change', function() {

调用.change时，元素不在DOM中。 .live会在处理程序出现时添加处理程序。

Answer 2

我对jquery不太了解，但我认为$().load是异步获取的。因此，alert给了$().change一些时间，而当您点击警告对话框时fetchcourses.php正在后台加载。
但是当alert被删除后，它会直接跳转到change()。

Answer 3

我想你想要这个：

$('#term').load('fetchcourses.php?', function() {
   $('[name=s2]').change(function() {
       $('#dept').load('fetchcourses.php?term='+$(this).val());
   });
});

加载数据后，传递给load()的函数将被执行。因此，如果$('[name=s2]')实际上引用了从fetchcourses.php返回的HTML中包含的元素，那么这应该有效。
但是，如果没有详细说明结构，很难说......

Answer 4

尝试：

$('[name='s2']').live("change", function() {
    $('#dept').load('fetchcourses.php?term='+$(this).val());
});

Answer 5

你应该尝试使用

$(document).ready(function(){ ...Your code here...  });

否则你的代码会运行得太快，而$（）或.change（）这样的东西会有点质疑。我认为当你使用警报时，你暂停执行脚本并有效地模仿$（document）.ready（）的行为。

Answer 6

我发现以下代码有效

$.ajax({
    async: false,
    dataType: "html",
    url: 'fetchcourses.php?',
    data: {},
    success: function(response) {
            $('#term').html('').html(response);
    },
});

由于jQuery.ajax允许异步加载。

编辑：显然这个问题与页面加载中不存在的元素有关。

删除调试警报时，jQuery .change（）停止工作（）

6 个答案: