JavaScript不適用於Ajax生成的代碼？

我正在使用jQuery form plugin來上傳文件。該插件使用隱藏的iframe來JavaScript不適用於Ajax生成的代碼？

上傳而不刷新頁面。一切正常，除了JavaScript不工作

生成的代碼。這裏是我的代碼：

<form id="image_form" action="" method="post" enctype="multipart/form-data"> 
     <input type="file" id="image_file" name="image_file"><br> 
     <input type="submit" value="upload"> 
    </form> 
    <div id="avatar_wrapper"> 
    </div>

這種形式上傳圖像到服務器和服務器將返回一些處理後的圖像。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var options = { 
      success: showResponse, 
      dataType: 'html' 
     }; 
    $('#image_form').ajaxForm(options); 

     $('.choose_avatar').hover(function() { /* Just for test */ 
      alert('hello'); 
     }); 
    }); 
    function showResponse(responseText, statusText, xhr, $form) { 
     $('#avatar_wrapper').append(responseText); 
    } 
</script>

responseText包含一些圖像。

<img src="http://localhost/avatar/0.jpg" class="choose_avatar" choice=0> 
    <img src="http://localhost/avatar/1.jpg" class="choose_avatar" choice=1> 
    <img src="http://localhost/avatar/2.jpg" class="choose_avatar" choice=2>

我寫這些代碼來測試：

$('.choose_avatar').click(function() { /* Just for test */ 
    alert('hello'); 
});

很奇怪的是，點擊功能不會對這些生成的代碼工作。有人可以幫助我嗎？謝謝。

來源

2011-03-28 thoslin

你將不得不使用live()，或做手工，將是恆定的父元素上click處理，並檢查event.target看到被點擊哪一個。

這是怎樣的引擎蓋下live作品，反正，所以才堅持下來:)

請注意，如果您使用的是較新的jQuery的，然後用on()，而不是live()。

來源

2011-03-28 08:41:12 alex

它的工作原理！謝謝。 – thoslin 2011-03-28 08:49:37

您必須在這些動態生成的元素上使用.live。

$('.choose_avatar').live("click", function() { /* Just for test */ 
    alert('hello'); 
});

來源

2011-03-28 08:39:18 rahul

在容器avatar_wrapper必須綁定活/委託監聽器：

$('#avatar_wrapper').delegate('.choose_avatar','click',function() { 
    alert('hello'); 
});

希望它能幫助！

來源

2011-03-28 08:44:14 capi

當您執行$('.choose_avatar')時，您將選擇choose_avatar（尚不存在）類別的元素並附加事件處理程序。如果元素是動態加載的，這顯然不起作用。更正確的方法是處理包裝div上的委託事件，

$('#avatar_wrapper').delegate('img.choose_avatar', 'click', function (e) { 
    // do stuff 
});

來源

2011-03-28 08:47:14

JavaScript不適用於Ajax生成的代碼？

回答

相關問題