jquery hide() 不适用于动态生成的 DIV

Question

试图隐藏从 aspx 后端调用的 ID 为 lineID 的动态生成的 DIV，但它不起作用。调用了函数，但调用函数 7 时，函数 6 中的行没有隐藏。

lineArea 基本上是绘制线条的 HTML 主体。

画线的代码

//show line connecting 2 nodes
    function displayInst6Line() {
        var calcNode = new calculateLine();
        $('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: line_colour, stroke: 5, zindex: line_zindex });           
         $('#lineID').show();
    }

 //hide line
    function displayInst7Line() {     
        var calcNode = new calculateLine();
        $('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: '#868e96', stroke: 5, zindex: line_zindex });
        $('#lineID').hide();
    }

为行进行计算的后端代码

        //math function to draw lines
    (function ($) {

        var helpers = {
            createLine: function (x1, y1, x2, y2, options) {

                // Check if browser is Internet Exploder ;)
                var isIE = navigator.userAgent.indexOf("MSIE") > -1;
                if (x2 < x1) {
                    var temp = x1;
                    x1 = x2;
                    x2 = temp;
                    temp = y1;
                    y1 = y2;
                    y2 = temp;
                }
                var line = document.createElement("div");
                line.id = "lineID";
                line.className = options.class;

                // Formula for the distance between two points
                // http://www.mathopenref.com/coorddist.html
                var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));

                line.style.width = length + "px";
                line.style.borderBottom = options.stroke + "px " + options.style;
                line.style.borderColor = options.color;
                line.style.position = "absolute";
                line.style.zIndex = options.zindex;

                if (isIE) {
                    line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
                    line.style.left = x1 + "px";
                    var nCos = (x2 - x1) / length;
                    var nSin = (y2 - y1) / length;
                    line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1 * nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
                } else {
                    var angle = Math.atan((y2 - y1) / (x2 - x1));
                    line.style.top = y1 + 0.5 * length * Math.sin(angle) + "px";
                    line.style.left = x1 - 0.5 * length * (1 - Math.cos(angle)) + "px";
                    line.style.transform = line.style.MozTransform = line.style.WebkitTransform = line.style.msTransform = line.style.OTransform = "rotate(" + angle + "rad)";
                }
                return line;
            }
        }


        $.fn.line = function (x1, y1, x2, y2, options, callbacks) {
            return $(this).each(function () {
                if ($.isFunction(options)) {
                    callback = options;
                    options = null;
                } else {
                    callback = callbacks;
                }
                options = $.extend({}, $.fn.line.defaults, options);

                $(this).append(helpers.createLine(x1, y1, x2, y2, options)).promise().done(function () {
                    if ($.isFunction(callback)) {
                        callback.call();
                    }
                });


            });
        };
        $.fn.line.defaults = {
            zindex: 10000,
            color: '#000000',
            stroke: "1",
            style: "solid",
            class: "line",
        };
    })(jQuery);

Answer 1

这表明您通过多次调用 helpers.createLine 来重复 ID。 您不能拥有多个具有相同 ID 的元素。 ID 的全部目的是成为唯一标识符。

jQuery 将$("#lineID") 优化为（有效地）$(document.getElementById("lineID")) 和getElementById 只能返回 一个 元素。通常，当您违反“您不能拥有多个具有相同 ID 的元素”规则时，这是第一个具有 ID 的元素。所以$("#lineID").hide(); 将隐藏具有该 ID 的 first 元素（即使它已经隐藏）。

您需要为元素提供不同的 ID，或者以其他方式标识它们。或者，如果只是其中一个，请使用remove 而不是hide 来实际删除元素。