AJAX可能发生冲突

Question

我正在使用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(document).ready(function() {

jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&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();
}
});

Answer 1

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

Answer 2

更改

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

到

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

使用相同的id并不理想（实际上你应该看看是否能找到解决方法），但这应该会使上传按钮上的click事件工作，即使它已被加载异步。