Javascript:重新加载 DIV 后按钮被禁用

Question

我有一个带有两个选项卡的表单，在两个选项卡上您都可以编辑数据并提交已经生效的更改。 现在，我希望在更改某些内容(例如图片 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);
            });
        }
    });
});

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

我做错了什么？

编辑: 我的标签代码:http://i.epvpimg.com/9SaKb.png 由于太长无法在此发布，因此我必须截图。

Answer 1

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

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

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

阅读关于使用 jQuery 进行事件委托(delegate)的文章 http://api.jquery.com/on/

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

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