使用动态添加的按钮启动模式 [英] launch modal with dynamically added button

问题描述

我正在尝试使用动态添加的按钮触发模式，但是click事件不起作用.

I am trying to trigger modal with dynamically added button, but click event does not work.

这是一个代码示例，我使用它在带有jquery的表中添加按钮

here is a code sample that I use to add button within a table with jquery

var button = "<button data-original-title='View' type='submit' data-hover='tooltip' data-placement='top' title='' data-toggle='modal' data-target='#properties" + property['_id'] + "' class='btn btn-default'><img src='images/home-icon.svg' height='20' width='20'></button>"

当我想启动警报但不知道如何触发模式时，以下脚本可以工作

the script below works when I want to launch alert but did not figure out how to trigger modal

$('body').on('click', '#properties-table td:last-of-type button', function(){
   alert('fdsfasdf')
})

推荐答案

您的代码无法正常工作，因为您在引导程序绑定了所有事件后添加了按钮.因此，当引导程序添加事件侦听器时，它找不到您的按钮，因此没有事件附加.我建议您使用js方法启动模式.

Your code wont work because you add the button after bootstrap has bind all its event. Thus while bootstrap is adding event listeners, it doesn't find your button and thus no event is attached. I advice you to use a js approach to launch modal.

在您的JS中

$('body').on('click', '#properties-table td:last-of-type button', function(){
  $($(this).data("target")).modal("show");
}

这应该有效.我已经更新了@Himanshu Tyagi小提琴 https://jsfiddle.net/p3q9bmf5/1/

This should work. I have updated @Himanshu Tyagi fiddle https://jsfiddle.net/p3q9bmf5/1/

这篇关于使用动态添加的按钮启动模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！