Bootbox Modal调用不在前置函数中工作

时间:2017-02-09 10:04:32

标签: javascript jquery

我在我的jQuery代码中添加了<td>table,在前面的<td>中我有一个<a>与类confirmDelete的链接。< / p>

任何附加了类confirmDelete的点击项目都会调用并打开模态。只有带有<a>的新附加列表项才会打开模态。

这就是我在前言中的内容:

<tr><td align="center" class="number"></td><td>'+jsonStr.departmentName+'</td><td>'+jsonStr.departmentDateAdded+'</td><td>'+jsonStr.departmentAddedBy+'</td><td class="linkAction"><a href=""><i class="glyphicon2 glyphicon-edit"></i></a> | <a class="confirmDelete" id="'+jsonStr.departmentID+'"><i class="glyphicon2 glyphicon-trash"></i></a></td></tr>

这是.confirmDelete函数

$('.confirmDelete').on('click', function() {
  var ID = $(this).attr('id');
  var departmentName = $(".departmentNameValue" + ID).val();

  bootbox.dialog({
    message: "Are you sure you want to delete following: <br>Department Name:<b> " + departmentName + "</b>",
    title: "<i class='glyphicon2 glyphicon-trash'></i> Delete",
    buttons: {
      success: {
        label: "No",
        className: "btn-success",
        callback: function() {
          $('.bootbox').modal('hide');
        }
      },
      danger: {
        label: "Delete",
        className: "btn-danger",
        callback: function() {
          $.ajax({
            type: "POST",
            url: "deleteDepartment.php",
            data: 'ID=' + ID,
            success: function(msg) {
              if (msg == "departmentDeleted") {
                $("#" + ID).fadeOut();
              }
            }
          });
        }
      }
    }

关于如何让类附加到新前置项目的任何想法?

1 个答案:

答案 0 :(得分:0)

重要的是 时,您会在confirmDelete按钮前添加。

将事件绑定到元素上,就像使用$('.confirmDelete').on('click')一样,只会影响DOM中已经的元素。这意味着如果在$('.confirmDelete').on('click')绑定后在DOM中添加任何内容,它们就不会被绑定。

如果要将某些事件绑定到那些可能已经在DOM中或将来可能在DOM中的元素,则应使用适合您的jQuery版本的事件绑定方法:

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

因此,如果你的jQuery版本是1.7+,你应该用这个替换你的绑定代码:

$( document ).on( 'click', '.confirmDelete' , function() {

// handler function

} );