Question

我有一个脚本创建一个div并添加一个函数，可以在点击时删除这个div，但它不起作用。

function del(el) {
   $("#"+el).remove();
}


function create() {
    var element = document.createElement("div");
    var att = document.createAttribute("onclick"); 
    att.value = "del(this.id)";  
    element.setAttributeNode(att); 
    $(element).attr('id', "someID");
    document.getElementById("someContainer").appendChild(element);
}

是的，是的，我知道这不是添加功能的最佳方式，但我想这样做。仅供参考 - 执行create()后，DIV显示正常。我检查过它确实有正确的ID和onclick="del(this.id)"属性，但点击后没有任何反应。我仔细检查并稍后将alert("I'm working")添加到onclick属性并且有效。我没有收到任何错误。在过去.remove()工作正常，但现在它没有（也许是因为我这次添加功能的方式）

编辑：点击div时似乎没有执行del()。

Answer 1

你已经发布了jQuery，但你主要展示的是Vanilla。至于你最初的问题，

function del(el) {
   $("#"+el).remove();
}

function create() {
    var element = document.createElement("div");
    var att = document.createAttribute("onclick"); 
    att.value = "del(this.id)";  
    element.setAttributeNode(att); 
    $(element).attr('id', "someID");
    document.getElementById("someContainer").appendChild(element);
$(element).html('<h1>DIV CREATED!</h1>').css('background-color', String.randColorHex());
}

create();

#someContainer > div { height: 10em; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/String.randColorHex/0c9bb2ff/String.randColorHex.js"></script>
<div id="someContainer"></div>

似乎工作正常。

我的猜测是，您在使用相同ID或可能scope问题创建多个div时遇到问题。

如果使用Google Chrome开发者工具，您可以采取以下几个步骤来仔细检查问题：

打开控制台
Double Check函数'del'是全局可用的，只需键入del即可获得预期的方法。如果您收到错误，那么您的方法可能会被取代。
- 您可以检查的另一种方法是将以下内容放入onClick：try{console.debug(del);}catch(err){console.error('DEL DOES NOT EXIST!')}

一旦你确定方法在范围内，如果仍然不起作用，请尝试以下方法：

将$("#"+el).remove();替换为console.debug(el, $('#'+el))
这有两件事：它向您显示功能正在运行，并为您提供有关内部情况的信息。
如果控制台消息的第一部分（el）是您期望的ID，请检查第二部分（$('#'+el)）。
它应该类似于：[div:#someID]
打开它并检查它是length'. If 0`，然后它没有找到该元素。
如果1，则删除工作正常。将remove删回到此控制台调用的上方，并确保现在获得0

仅供参考，这是如何使用jQuery做的尝试。

function create() {
	var container = $('#someContainer'),	//	get container
		//	create div, everything in {} is an ATTR, then append it TO the container
		div = $('<div />', { id: 'someID' + container.children('div').length+1 }).appendTo(container);
	//	just for visual, i use my own plugin to set a random background color
	div.css('background-color', String.randColorHex());
}

$(function() {
	$(document)	//	your click methods
		.on('click', '#btnCreate', create)
		.on('click', '#someContainer > div', function(e) { $(this).remove(); })
	
	//  trigger button once on load
	$('#btnCreate').trigger('click');
})

#someContainer > div { height: 2em; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/String.randColorHex/0c9bb2ff/String.randColorHex.js"></script>
<button id="btnCreate">Create</button>
<hr />
<div id="someContainer"></div>

全局函数未执行

1 个答案: