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

改变

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

至

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

使用相同的方法并不理想id（实际上您应该看看是否可以找到解决方法），但这应该使上传按钮上的点击事件即使是异步加载也可以工作。

于 2013-01-28T04:55:18.033 回答
1

您有 2 个带有 的元素id="upload_image"，即使这些元素隐藏在页面上，也会导致意外结果。

于 2013-01-28T03:15:27.767 回答