一，原型：
function Notification (title, message, id) {
var $title = this.title = title;
var $message = this.message = message;
var $id = this.id = title;
/* ---------------creating HTML prototype */
var $mainDiv = $("<div></div>").appendTo($("#wrapper"));
$mainDiv.attr('id', $id);
$mainDiv.addClass('main-div');
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
$dismissButton.attr('id', 'dismissButton');
var $pTitle = $("<h2></h2>").appendTo($mainDiv);
$pTitle.attr('id', 'title');
$pTitle.text($title);
var $para = $("<p></p>").appendTo($mainDiv);
$para.attr('id', 'message');
$para.text($message);
var $ul = $("<ul></ul>").appendTo($mainDiv);
var $li1 = $("<li></li>").appendTo($ul);
$li1.attr('id', 'okButton');
var $button = $("<button>Ok</button>").appendTo($li1);
$button.addClass('buttons');
/* ---------------Dismissing notifications */
$("#dismissButton").click(function() {
document.getElementById($id).remove();
});
};
因此，原型是使用制作的new Notification(*arguments here*)，在那里我们得到一个带有通知小部件的盒子。到目前为止，一切都很好。当我按下X按钮（id dismissbutton）时，应将其取下，然后这样做。然而。如果我使用new notification几次，则会得到多个框（具有的不同ID $mainDiv），并且它们的关闭按钮不起作用。最上面的小部件框的关闭按钮是唯一起作用的按钮，并且它也删除了所有其他框。
我需要将它们分开，并让解散按钮分别为每个盒子工作。
提前致谢 ：）
这里的问题是您正在创建具有相同ID的多个元素（顺便说一句，这是无效的HTML）。
每次跑步
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
$dismissButton.attr('id', 'dismissButton')
正在创建一个新的“关闭按钮”，该IDdismissButton与先前的“关闭按钮”（如果有）具有相同的ID（）。
另一件事是，每次您运行
$("#dismissButton").click(function() {
document.getElementById($id).remove();
});
您仅指示第一个“关闭按钮”以$id在单击时删除ID标识的元素。
我认为解决此问题的最佳方法是使用对元素本身而非ID的引用。
因此，我将像这样创建“关闭”按钮；
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
并像这样确定其点击回调
$dismissButton.on('click', function () {
$mainDiv.remove();
});
这应该适合您。
最后但并非最不重要的一点是，我将避免为任何元素提供相同的ID，因为它会生成无效的HTML代码。您正在执行以下几行
$dismissButton.attr('id', 'dismissButton');$pTitle.attr('id', 'title');$para.attr('id', 'message');$li1.attr('id', 'okButton');本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句