Javascript jquery在动态创建的元素上侦听单击事件

我需要为html页面创建一个模式。当点击页面上的按钮时，模态显示出来。关闭模态本身中包含的模态的按钮

问题在于，用于从文档中删除模式html的click event on close按钮不起作用。但是，分配给同一事件的

console.log

会显示在控制台中。为什么会发生这种情况以及如何解决

钢笔：

Js代码：

$(document).ready(function(){
  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })

  $(document).on('click','#closeModal',function(){
    console.log('click triggered')
    $(document).remove('#modal')
 })

  var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'
})

$（文档）.ready（函数（）{
$（'#showmodel'）。在（'click'，function（）上{
$（'.container'）.append（modalHtml）
})
$（文档）。在（'单击'，'关闭模式'，函数（）上）{
console.log（'单击已触发'）
$（文档）。删除（“#模态”）
})
var modalHtml='这是一个模式
关闭'
})

您的问题是由于使用了

remove（）

中的选择器造成的。它用作过滤器，而不是查找元素。要修复逻辑，请直接选择元素并对其调用

remove（）

：

$('#modal').remove();

---

您的问题是由于使用了

remove（）

中的选择器造成的。它用作过滤器，而不是查找元素。要修复逻辑，请直接选择元素并对其调用

remove（）

：

$('#modal').remove();

您正在这样做：

$(document).remove("#modal");

$("#modal").remove();

您应该在哪里执行此操作：

$(document).remove("#modal");

$("#modal").remove();

---

还要注意，您不需要等到DOM准备好将处理程序绑定到

文档

$(document).ready(function(){
   var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'

  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })
})

$(document).on('click', '#closeModal', function(){
    console.log('click triggered')
    $("#modal").remove()
})

$（文档）.ready（函数（）{
var modalHtml='这是一个模式
关闭'
$（'#showmodel'）。在（'click'，function（）上{
$（'.container'）.append（modalHtml）
})
})
$（文档）。在（'单击'，'关闭模式'，函数（）上）{
console.log（'单击已触发'）
$（“#模态”）.remove（）
})

您正在这样做：

$(document).remove("#modal");

$("#modal").remove();

您应该在哪里执行此操作：

$(document).remove("#modal");

$("#modal").remove();

---

还要注意，您不需要等到DOM准备好将处理程序绑定到

文档

$(document).ready(function(){
   var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'

  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })
})

$(document).on('click', '#closeModal', function(){
    console.log('click triggered')
    $("#modal").remove()
})

$（文档）.ready（函数（）{
var modalHtml='这是一个模式
关闭'
$（'#showmodel'）。在（'click'，function（）上{
$（'.container'）.append（modalHtml）
})
})
$（文档）。在（'单击'，'关闭模式'，函数（）上）{
console.log（'单击已触发'）
$（“#模态”）.remove（）
})

直接在元素上调用

remove（）

-使用

$（“#modal”）。改为remove（）

-请参阅下面的演示：

$（文档）.ready（函数（）{
$（'#showmodel'）。在（'click'，function（）上{
$（'.container'）.append（modalHtml）
})
$（文档）。在（'单击'，'关闭模式'，函数（）上）{
$（“#模态”）.remove（）；
})
var modalHtml='这是一个模式
关闭'
})

#showmodel{
利润率：50px40%；
字体大小：50px；
}
#模态{
显示：块；
}
#模态，模态背景{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
#模态。模态背景：之前{
内容：“；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：rgba（43,43,43,0.5）；
}
#情态。情态内容{
宽度：50%；
保证金：20px自动；
位置：相对位置；
背景：黑色；
颜色：#fff；
填充：20px；
}
#模态。模态内容#闭合模态{
填充：10px；
利润率：10px；
边框：1px实心#fff；
}
#模态。模态内容#关闭模态：悬停{
光标：指针；
}

显示模态

直接在元素上调用

remove（）

-使用

$（“#modal”）。改为remove（）

-请参阅下面的演示：

$（文档）.ready（函数（）{
$（'#showmodel'）。在（'click'，function（）上{
$（'.container'）.append（modalHtml）
})
$（文档）。在（'单击'，'关闭模式'，函数（）上）{
$（“#模态”）.remove（）；
})
var modalHtml='这是一个模式
关闭'
})

#showmodel{
利润率：50px40%；
字体大小：50px；
}
#模态{
显示：块；
}
#模态，模态背景{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
#模态。模态背景：之前{
内容：“；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：rgba（43,43,43,0.5）；
}
#情态。情态内容{
宽度：50%；
保证金：20px自动；
位置：相对位置；
背景：黑色；
颜色：#fff；
填充：20px；
}
#模态。模态内容#闭合模态{
填充：10px；
利润率：10px；
边框：1px实心#fff；
}
#模态。模态内容#关闭模态：悬停{
光标：指针；
}

显示模态

更换

$(document).remove('#modal');

到

替换

$(document).remove('#modal');

到

---

OP已在使用委托事件处理程序，这不是问题OP已在使用委托事件处理程序，这不是问题