Jquery事件不適用於動態創建的html

<li> 
     <label>Chapter Title</label> 
     <input type="text" name="chapter[1][title]" /> 
    </li> 

    <li>  
     <label>Text</label> 
     <textarea name="chapter[1][text]" ></textarea> 
    </li> 
    <li> 
     <input type="file" name="image2" id="image2" /> 
     <img id="thumb2" width="100px" height="100px"/> 
     <input type="hidden" id="image_src2" name="chapter[1][photo]" /> 
    </li> 

    <li id="caption2" style="display:none;"> 
     <label>Photo Caption</label> 
     <input type="text" name="chapter[1][photo_caption]" /> 
    </li>

表單字段和JavaScript代碼是動態創建的。Jquery事件不適用於動態創建的html

var thumb = $('img#thumb2'); 
    new AjaxUpload('image2', { 
     action: "action", 
     name: 'userfile', 
     onSubmit: function(file, extension) { 
      $('div.preview').addClass('loading'); 
     }, 
     onComplete: function(file, response) { 
      thumb.load(function(){ 
       $('div.preview').removeClass('loading'); 
       thumb.unbind(); 
      }); 
      thumb.attr('src', response); 
      $('#image_src2').val(response); 
      $('#image_src2').live('change',function() 
      { 
       $('#caption2').show(); // this does not work 
      }); 
     } 
    });

圖像上傳得很好，縮略圖顯示，但字幕字段沒有顯示，也沒有顯示錯誤。

來源

2011-08-26 Shoaib Iqbal

你能不能把'$（ '＃caption2的'）顯示（）;'代碼直接跌破'$（ '＃image_src2'）VAL（反應）;'線沒有把它放在裏面改變功能？我這麼說是因爲你的'image_src2'的值無論如何都在改變，所以不需要調用另一個改變函數。 –

試試這個你可能會綁定到change處理程序：

$('#image_src2').val(response); 
$('#caption2').show();

來源

2011-08-26 05:02:29

更改圖像源後$('#image_src2').val(response)

來源

2011-08-26 04:58:56

嘗試使用負載回調：這都將作爲並顯示圖像時它滿載

onComplete: function(file, response) { 
     thumb.load(function(){ 
      $('div.preview').removeClass('loading'); 
      thumb.unbind(); 
     }); 
     thumb.attr('src', response); 
     $('#image_src2').val(response); 
     $('#image_src2').load(function() // changed to "load" 
     { 
      $('#caption2').show(); 
     }); 
    }

來源

2011-08-26 05:02:53 Will

Jquery事件不適用於動態創建的html

回答

相關問題