當我用ajax刷新元素時，jQuery無法按類找到元素

我想動態上傳圖像並在使用jquery庫後對其進行裁剪。當我用ajax刷新元素時，jQuery無法按類找到元素

下面是代碼

$(document).ready(function() { 

$('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true }); //this code is from crop library 


     $('#photoimg').live('change', function()   { 
        $("#preview").html(''); 
      $("#preview").html('<img src="loader.gif" alt="Uploading...."/>'); 
     $("#imageform").ajaxForm({ 
        target: '#preview' 
    }).submit(); 

     }); 


    });

下面是HTML部分

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
Upload your image <input type="file" name="photoimg" id="photoimg" /> 
</form> 
<div id='preview'> 
<img class="preview" src="uploads/1391586558.png" /> 
</div>

這更新圖像

echo "<img src='uploads/".$actual_image_name."' class='preview'>";

那麼我可以在一開始裁剪圖像PHP的一部分，但是當它通過ajax（具有相同的類名）替換另一個時，它停止工作。

有什麼建議嗎？

來源

2014-02-05 Ilya Libin

如果你使用Ajax刷新它，你創建一個新的元素，這個新元素是平原。我曾經st upon過這個問題 –

是的，我明白了。但是我怎麼能選擇它呢？ –

人$.live()首先不贊成你應該使用

$('#photoimg').on('change', function(){});

它不工作，因爲你把.imgAreaSelect.的元素被刪除。

當div#preview充滿更新的圖像時，您應該再次啓用它。

$("#imageform").ajaxForm({ 
    target: '#preview', 
    success: function() { 
     $('#preview').find('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true }); 
    } 
}).submit();

整個例如：

(function(){ 
    var imgAreaSettings = { aspectRatio: '4:3', handles: true }; 
    var preview_div = $("#preview"); // cache this one, it's used multiple times so makes searching DOM faster. 

    $('#photoimg').on('change', function(){ 

     preview_div .html(''); 
     preview_div .html('<img src="loader.gif" alt="Uploading...."/>'); 

     $("#imageform").ajaxForm({ 
      target: '#preview', 
      success: function() { 
       preview_div.find('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true }); 
      } 
    }).submit(); 

})();

來源

2014-02-05 09:47:16 Timmetje

首先 - 謝謝！現在它可以工作。但我試圖使用.on（），它不工作，而.live（）它是完美的。可能是我的jQuery版本是舊的或什麼 –

1.10.2是最新版本嘗試加載CDN：'' – Timmetje

祝你好運，並接受答案，如果它可以幫助你：p – Timmetje

你需要的圖片替換後再次打電話給

$('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });

。

來源

2014-02-05 09:46:32 Daniele

我試着把它放在}）。submit（）;但它不工作.. –

你應該添加它成功的選擇，看我的回答 – Timmetje

蒂姆給正確的答案，你需要添加'成功'選項，並打電話給'imgAreaSelect' – Daniele

當我用ajax刷新元素時，jQuery無法按類找到元素

回答

相關問題