javascript - 使用javascript正确实现创建和删除功能

标签 javascript html ajax

我可以使用 javascript 创建一个 div。但是,无法删除我之前创建的 div。只有在回发后,我才能删除该 div。实际上,在创建 div 后,脚本无法找到该 div,因为页面没有再次加载。 我想要做的是创建一个页面,我可以添加一个项目并删除该项目。 添加脚本效果很好。 删除脚本:

<script type="text/javascript">
    $(function () {            
        $('.remove ,.shop-button-large, .shop-button-add').click(function () {               
            var itemToDelete = $(this).attr("data-id");                                   
            if (itemToDelete != '') {
                $.post("/ShoppingBox/RemoveFromBox", { "id": itemToDelete },
                    function (data) {                                   
                        $("#boxItem-" + itemToDelete + "-" + data.ItemCount).fadeOut(300);                          
                    });
            }
        });
    });
</script>

最佳答案

用于删除的单击处理程序是在渲染 DOM 节点之前完成的。它需要位于 $(function() { ... } 内部

http://plnkr.co/edit/IhtyH6ampodXICPBv6Fq?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    $(function() {

      $("#create").click(function() {
        var createDiv = document.createElement("div");
        createDiv.id = "myDiv";
        createDiv.style.margin = "0 auto";
        createDiv.style.width = "600px";
        createDiv.style.height = "600px";
        createDiv.style.backgroundColor = "red";
        document.getElementById("myBody").appendChild(createDiv);
      });


      $("#remove").click(function() {
        console.log('remove', $("#myDiv"));
        $("#myDiv").fadeOut(300);

      });

    });
  </script>


</head>

<body id="myBody">
  <a href="#" id="create">Create</a>
  <a href="#" id="remove">Remove</a>
</body>

</html>

关于javascript - 使用javascript正确实现创建和删除功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29760711/

相关文章:

javascript - jQuery:如何停止 AJAX 函数转义用于 POST 数据的 JSON 字符串

javascript - 使用ajax上传文件时提交表单

javascript - 从 PDF.JS pdf 转换为 Canvas 标签获取 base64 png?

javascript - Node 命令不执行星号路径

javascript - 如何从javascript(nodejs)程序调用python,而不创建子进程

javascript - 正则表达式替换字符串的一部分

php - 使用 Blade 显示 HTML 显示 HTML 代码

ios - HTML5音频无法在UIWebView iOS上播放?

javascript - 在已弃用的 javascript 函数中创建函数

javascript - 如果我在页面滚动上添加更多 div,文本效果将无法正常工作