0

私はAJAXを使用して、Wordpressテーマオプションページで次のように設定されているページタブ間をスムーズに移動しています。

テーマオプションページ

タブはうまく機能しており、ページの中央のコンテンツのみが変更されています。これは私が望む方法です.....ただし、AJAXが各ページに部分的なHTMLのみをロードしているため、メディアアップロードボタンが機能しなくなりました（少なくともそれが問題の原因だと思います）。各ページのスクリプトをリセットして、各AJAX呼び出しの後にメディアアップローダーが機能するようにする方法があるかどうかを知りたいです。

AJAXタブナビゲーションを処理するための私のコードは次のとおりです。

jQuery.noConflict();

jQuery('.nav-tab').live('click', function(e){ 
   e.preventDefault();
   var link = jQuery(this).attr('href'); 

jQuery('.page-form').fadeOut(100).load(link + ' .page-form > *', function() { 
jQuery('.page-form').fadeIn(100).load(link + ' .page-form > *', function() {
  });
});
});

更新：メディアアップロード用に追加されたコード：

<tr>
    <td>
        <label for="upload_image">
     <input style="float:left; width:80%" id="upload_image" type="text" name="upload_image" value="<?php echo $options['upload_image']; ?>" />
     <input style="float:right" id="upload_image_button" type="button" value="Upload Image" />

    <br/>
        </label>
<div id="image-holder">
   <img id="upload_image" name="upload_image" src="<?php if ($options['upload_image'] != "" ) { echo $options['upload_image']; } ?>" />
</div>

</td>

<td></td>

</tr>

これが私がイメージアップローダーを呼び出すために使用しているJQUERYです

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
});

window.send_to_editor = function(html) 
{

imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
imgsrc = '<img src="'+imgurl+'">';
jQuery('#image-holder').html(imgsrc);
tb_remove();
}
});
4

2 に答える 2

1

が付いた要素が2つid="upload_image"あるため、要素がページに非表示になっている場合でも、予期しない結果が生じる可能性があります。

于 2013-01-28T03:15:27.767 に答える
1

変化する

jQuery('#upload_image_button').click(function() {

に

jQuery(document).on('click', '[id=upload_image_button]', function() {

同じものを使用することは理想的ではありませんがid（実際、それを回避する方法を見つけることができるかどうかを確認する必要があります）、これにより、非同期でロードされた場合でも、[アップロード]ボタンのクリックイベントが機能するはずです。

于 2013-01-28T04:55:18.033 に答える