2010-10-15 41 views
0

所以我此刻的下面的代碼:jQuery的.change()停止工作,當我刪除調試警報()

<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()沒有任何反應。

我在這裏和其他地方看過類似的問題,顯然它與異步代碼有關?但是,我不太明白這意味着什麼,或者如何解決它。任何幫助表示讚賞!

+0

元素'$('[name = s2]')'包含在從''fetchcourses.php?''加載的代碼中? – 2010-10-15 16:19:13

+0

@Felix:是的,這是正確的 – Parker 2010-10-15 16:40:06

回答

2

變化:

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

到:

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

元素是不是在DOM時.change被調用。當它出現時,.live添加處理程序。

+0

這很好。感謝您解釋問題! – Parker 2010-10-15 16:36:15

+1

只有當元素隨着時間的推移添加到頁面並且你不想每次都手動附加處理程序時,我纔會使用'live'。但如果只是一個鏡頭把相應的代碼放在回調中就足夠了... – 2010-10-15 17:03:45

1

我對jquery沒有太多的想法,但我認爲$().load異步提取。因此,alert給予$().change一段時間,而fetchcourses.php在您單擊警報對話框時正在後臺加載。
但是當alert被刪除時,它會直接跳轉到change()

1

你想要這個我覺得

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

傳遞給load()功能一旦數據被加載得到執行。因此,如果$('[name=s2]')實際上是指從fetchcourses.php返回的HTML中包含的元素,那麼這應該起作用。
但沒有告訴更多關於結構就很難說......

1

儘量做到:

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

工程很好,謝謝隊友! – Parker 2010-10-15 16:36:48

0

你應該嘗試使用

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

否則你的代碼將太快運行而諸如$()或.change()之類的東西會有點問題。 我認爲當您使用警報時,您會暫停腳本的執行並有效地模仿$(document).ready()的行爲。

0

我發現下面的代碼工作

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

至於jQuery.ajax允許異步加載。

編輯:顯然這個問題必須與頁面加載不存在的元素。

+0

'async:false'可以鎖定瀏覽器。 – 2010-10-15 16:34:25