2010-03-16 60 views
2

在文件準備好運行此代碼:jQuery的.load不適用功能齊全

jQuery(document).ready(function(){ 
     jQuery('#button').click(function() { 
      jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt"); 
      return false; 
     }); 
    }); 

然後,如果我創建像

<div id="contact_form"> 
    <form name="contact" method="post" action=""> 
    <fieldset> 
     <label for="name" id="name_label">Name</label> 
     <input type="text" name="name" id="name" size="30" value="" class="text-input" /> 

     <label for="email" id="email_label">Return Email</label> 
     <input type="text" name="email" id="email" size="30" value="" class="text-input" /> 

     <label for="phone" id="phone_label">Return Phone</label> 
     <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 

     <br /> 
     <input type="submit" name="submit" class="button" id="button" value="Send" /> 
    </fieldset> 
    </form> 
</div> 

一切正常的形式。但是,如果我在實際的應用程序中模仿我想要的行爲(在document.ready已經被執行之後,表單被動態加載.jquery #button動作沒有被調用,表單的行爲就好像沒有javascript,只是運行後

jQuery('#contact_form').load("/dynamicform.php"); 

是否有東西,有工作要做,以.load()爲了準備功能被應用到它

回答

3

使用.live()這樣的:?

jQuery(document).ready(function(){ 
    jQuery('#button').live('click', function() { 
     jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt"); 
     return false; 
    }); 
}); 

當你添加ha時,你的元素不存在ndler。您需要在所有情況下監聽點擊...這是.live()的用途,是在DOM根目錄上進行點擊,而.click()沒有附加到任何內容,因爲沒有與選擇器匹配的元素你叫它。 live()稍後會偵聽匹配元素的點擊。

-1

ready()不適用於load()之後。在文檔中查找load(),您可以指定一個回調,在加載完成後執行,您可以在其中重新分配點擊處理程序。

0

當準備好使用DOM時,會調用.ready事件,因此當您動態加載並向某個已經存在的DOM中插入某些內容時,它將不會被調用。

另外我認爲通過附加一個事件處理程序到窗體而不是提交按鈕來讓自定義窗體提交工作是很常見的做法。因爲它也會處理用戶以另一種方式提交表單而不是點擊提交按鈕的情況。例如:

jQuery("#contact_form form").submit(function (event) { 
    event.preventDefault(); 
    // Do your stuff... 
}) 

(event.preventDefault():http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29