Question

我有一个带有两个标签的表单，在两个标签页上，您可以编辑数据并提交已经有效的更改。现在，我希望您在更改内容后重新加载更改的标签（例如图片网址和缩略图应该刷新）以查看更改。

我有第二个标签的代码

<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获取的所有元素都被视为新元素 - 这也意味着您之前在这些按钮上的点击处理程序也会丢失 - 因此它们不会以相同的方式做出反应：D < / p>

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

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

使用jQuery在http://api.jquery.com/on/

阅读有关事件委派的动态

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

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

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

1 个答案: