Javascript：重新加载DIV后禁用按钮

我有一个有两个选项卡的表单，在这两个选项卡上，您可以编辑数据并提交已经生效的更改。 现在，我希望在更改某些内容（例如，图片URL和缩略图应刷新）后重新加载所做更改的选项卡，以查看更改

我有第二个标签的代码

<script>
$(document).ready(function(){
    $('.btn').click(function(){
        var clickBtnValue = $(this).val();
        if(clickBtnValue == 'Save') {
            var ajaxurl = 'ajax.php',
                data = $('form').serialize();
            $.post(ajaxurl, data, function (response) {
                if(response == '')
                {
                    alert("Successfully saved");
                    location.href="catalog.php";
                }
                else               alert(response);
            });
        }
        else if(clickBtnValue == 'Save & Continue Edit')
        {
            var ajaxurl = 'ajax.php',
                data = $('form').serialize();
            $.post(ajaxurl, data, function (response) {
                if(response == '') alert("Successfully saved");
                else               alert(response);
            });
        }
        else if(clickBtnValue == 'Add new Item')
        {
            var ajaxurl = 'ajax.php',
                data = $('#itemform').serialize();
            $.post(ajaxurl, data, function (response) {
                if(response == '')
                {
                    alert("Successfully added new Item");
                    location.href="catalog.php";
                }
                else               alert(response);
            });
        }
        else if(clickBtnValue == 'Save Images')
        {
            var ajaxurl = 'saveimages.php',
                data = $('#imageform').serialize();
            $.post(ajaxurl, data, function (response) {
                if(response == '')
                {
                    alert("Successfully saved");
                    $("#tab_images").load(location.href+" #tab_images>*","");
                }
                else               alert(response);
            });
        }
    });
});

$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
var clickBtnValue=$（this.val（）；
如果（单击BtnValue==“保存”）{
var ajaxurl='ajax.php'，
数据=$（'form'）。序列化（）；
$.post（ajaxurl、数据、函数（响应）{
如果（响应=“”）
{
警报（“已成功保存”）；
location.href=“catalog.php”；
}
其他警报（响应）；
});
}
否则如果（单击BtnValue==“保存并继续编辑”）
{
var ajaxurl='ajax.php'，
数据=$（'form'）。序列化（）；
$.post（ajaxurl、数据、函数（响应）{
如果（响应=“”）警报（“成功保存”）；
其他警报（响应）；
});
}
否则如果（单击BtnValue==“添加新项目”）
{
var ajaxurl='ajax.php'，
数据=$（'#itemform'）。序列化（）；
$.post（ajaxurl、数据、函数（响应）{
如果（响应=“”）
{
警报（“已成功添加新项目”）；
location.href=“catalog.php”；
}
其他警报（响应）；
});
}
否则如果（单击BtnValue==“保存图像”）
{
var ajaxurl='saveimages.php'，
数据=$（'#imageform'）。序列化（）；
$.post（ajaxurl、数据、函数（响应）{
如果（响应=“”）
{
警报（“已成功保存”）；
$（“#选项卡_图像”）.load（location.href+“#选项卡_图像>*”，“”）；
}
其他警报（响应）；
});
}
});
});

到目前为止，一切都正常，数据被保存，DIV被重新加载，但现在每当我尝试按下一个按钮时，什么都不会发生，即使是在第一个选项卡上

我做错了什么

编辑： 我的选项卡代码：

---

无法在此处发布，因为它太长，所以我必须制作一个屏幕截图。

看起来您尝试单击的按钮位于正在重新加载的div中。当该div的内容被替换时，您使用ajax获取的所有元素都被视为新元素——这也意味着您以前在这些按钮上使用的单击处理程序也丢失了——因此它们的反应方式不同：D

尝试将事件绑定到正在替换的div之外的元素，而不是按钮本身

$("parent_selector_outside_ajax_div").on("click", ".btn", function() {
   //your button function
});

阅读关于jQuery事件委派的移动

由于您的外部js库绑定了它自己的按钮，我建议将这些按钮移到您尝试更新的div之外（这应该不是一个大问题，因为您只是为了图像预览而尝试更新？：D）

---

另一种选择（我不会这么做）是在ajax重新加载后，通过调用库提供的任何函数来初始化自身，重新绑定这些按钮。如果您的应用程序是长期存在的，那么在用新内容替换旧内容之前，您还应该删除当前内容中的所有事件处理程序，以避免某些浏览器中可能出现的内存泄漏（不确定您的目标受众是什么）。

我认为我们没有足够的代码（特别是HTML），能够帮助你。将它添加到主帖子。你可以用它来代替截图。还有javascript的缺失，特别是clickBtnValue的来源、所述代码的执行时间以及它与按钮的连接方式。你应该在帖子中发布代码，它没有那么长。什么是

clickBtnValue

？再次编辑了帖子。编辑：看起来这只对一个按钮有效，其他两个上传图像的按钮（external.js文件）则不起作用。原理仍然是一样的：D你能用你的html制作一个JSFIDLE示例吗，包括js和这些外部文件，以便我可以更仔细地了解其他按钮是如何受到影响的：我不知道如何使用jsFiddle，但是其他两个按钮也由与第一个按钮相同的父div转换。下面是另一个脚本：我不能将按钮移到div之外，因为那样按钮就不会出现在选项卡页面上。重新绑定按钮也不起作用。如果你不给我更多的代码，那就帮不了你更多了：D请看一下jsfiddle.net，将你的相关html和你有的任何javascript位粘贴到其中-你问题中的当前示例不包括对该外部库的任何引用，也不包括它是如何初始化的