javascript - 带有动态添加按钮的启动模式

标签 javascript jquery twitter-bootstrap bootstrap-modal

我尝试使用动态添加的按钮触发模式,但单击事件不起作用。

这是一个代码示例,我用它在带有 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>"

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

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

最佳答案

您的代码将无法工作,因为您在 Bootstrap 绑定(bind)了其所有事件后添加了按钮。因此,当 Bootstrap 添加事件监听器时,它找不到您的按钮,因此不会附加任何事件。我建议你使用js方法来启动模式。

在你的 JS 中

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

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

关于javascript - 带有动态添加按钮的启动模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38142362/

相关文章:

javascript - 使用 webpack output.target 选项创建 ES6 模块 'equivalent'

javascript - 如何从javascript中的rgb字符串中提取颜色值

javascript - 为什么 √ 不允许作为对象名称/字符串名称/函数名称/数字名称?

javascript - React — 显示字段但获取对象

css - Bootstrap Dropdown Button 的样式与 Firefox 表格内的 Anchor 相同

javascript - 如何删除 JavaScript 中的对象?

javascript - 检查是否选中所有单选按钮

javascript - 使用hammer.js使克隆交换到html元素

jquery - 在 HTML 中使用内容框

javascript - colorbox 和 bootstrap 库之间的冲突