Question

我正在处理一小段代码，当我点击嵌入到另一个元素中的链接时，JSFiddle难以启动“点击”功能，但是当我点击一个链接时该功能正常工作独立链接。

这是JSFiddle的链接：

http://jsfiddle.net/AlexandrII/hwte6w27/16/

我说的是在你运行javascript代码至少一次之后内置在'newdivs'中的“X”链接。并且JQuery（$（'a'）等）函数似乎不适用于JSFiddle中的那些。

任何想法为什么？

<a href="#">Test link</a>

<div>
    <form onsubmit="adDiv(); return false" method="post">
        <p> Counter: <span id="wow">0</span></p>
        <input id="texts" style="width:200px" type="text" value=""/>
        <input type="submit" value="test"/>
    </form>
</div>

function adDiv(){
var textVal = document.getElementById('texts').value;

if (!textVal){
    return false;
}

var div = document.createElement("div");
var tag = document.createElement("span");
var counter = parseInt(document.getElementById('wow').innerHTML);
var divid = counter+1+"div"; 

tag.title = "tag1";
tag.className = "tag1";
tag.href = "#";
tag.innerHTML = document.getElementById('texts').value;

div.className = "newdiv";
div.id = divid;    

document.body.appendChild(div);
document.getElementById(divid).appendChild(tag);

var tag2=document.createElement("a");
tag2.className="tag2";
tag2.innerHTML = "x";
tag2.href = "#";
tag2.id = "newtag";

document.getElementById(divid).appendChild(tag2);

document.getElementById('wow').innerHTML = counter + 1

document.getElementById('texts').value = "";}

$（“a”）。click（function（）{alert（“testqwq3”）;}）;

.newdiv {
display:block;
width:200px;
height:auto;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
box-shadow: 0px 0px 1px gray;
color: #3E6D8E;
font-size: 90%;
line-height: 1.0;
margin: 2px 0px 2px 0px;
padding: 3px 4px;
text-decoration: none;
text-align: left;}    

.tag1 {
width:175px;
height:17px;
display:inline-block;
color:#3E6D8E;}    

.tag2 {
width:20px;
height:17px;
display:inline-block;
float:right;
margin-right:2px;
text-align: right;
color:#C0CBCF;
text-decoration: none;}

.tag2:hover {
     color:#3E6D8E; }

Answer 1

因为click事件处理程序未绑定到新创建的元素。将代码修改为：

$( document ).on('click', 'a', function() {
    alert("testqwq3");
});

一切都应该没问题。

Answer 2

此代码：

$( "a" ).click(function() {
    alert("testqwq3");
});

会在运行时找到存在的并向其添加点击处理程序。由于您在以后添加的元素在代码运行时并不存在，因此它自然不会将处理程序连接起来。

您可以在a元素中添加处理程序，或者使用事件委派。这是代表团的样子：

tag2

该钩子点击容器元素，但只有当点击通过与冒充到容器时匹配给定选择器的东西时才调用你的处理程序。

在你的小提琴中，adDiv以外没有合适的容器，所以：Updated Fiddle

$("some container element").on("click", "a", function() { alert("testqwq3"); });

...但实际上通常会有一些合适的容器，你可以更接近动态添加的实际元素。

Answer 3

由于其他答案提供了附加事件时代码不存在的详细信息，因此他们使用.on（）作为解决方案。您也可以将delegate（）用于将来的处理程序

$(document).delegate("click", "a", function() {
    alert("testqwq3");
});

此处文档可以替换为任何容器选择器

JQuery＆＃39;点击＆＃39;不会在JSFiddle上工作

$（“a”）。click（function（）{alert（“testqwq3”）;}）;

3 个答案: