引导模式相关目标未定义

Posted 2023-05-08

【中文标题】引导模式相关目标未定义

【英文标题】：Bootstrap modal relatedTarget is undefined

【发布时间】：2014-11-29 00:13:15

【问题描述】：

我正在尝试使用show.bs.modal 事件的属性relatedTarget 获取被点击的元素。但它总是变得不确定。

这就是我所拥有的：

  $("#curCarSelect").on('click', function(e) 
    $("#curCarModal").on('show.bs.modal', function(event) 
      modalOpenedby = event.relatedTarget; 
      alert(modalOpenedby);
    ).modal('toggle');
  );

【问题讨论】：

请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西

【参考方案1】：

尝试：

$("#curCarSelect").on('click', function(e) 
   $modal.modal('toggle', $(this));
);

其中 $modal 是您要打开的模态元素，然后：

$modal.on('show.bs.modal', function (event) 
   var button = $(event.relatedTarget) // Button that triggered the modal
)

【讨论】：

这应该是公认的最佳答案。目前“最好”的没有用。

访问事件对象时未定义的元素

这应该在引导文档中。

【参考方案2】：

如果您需要在动态打开的模态中使用event.relatedTarget，那么您可以将目标作为第二个参数传递给模态函数。

$("#curCarSelect").on('click', function(e) 
    $("#curCarModal").modal('toggle', $("#curCarSelect")); 
);

【参考方案3】：

Per the documentation:

如果由点击引起，点击的元素可作为事件的relatedTarget 属性使用。

但你只是打电话给.modal('toggle')。 这不涉及任何点击事件，因此为什么 relatedTarget 在您的情况下未定义。

【讨论】：

您能否发布确实涉及点击事件的代码，以使relatedTarget未未定义？我正在努力学习这非常糟糕的，基于 BS 3.2.2 的工作示例将是王牌！谢谢;)

使用data-toggle="modal"时会定义

@lowtechsun，你能解决这个问题吗？

@user1149244 我很久以前就离开了引导程序，很可能永远不会碰它。如果您愿意，请查看Susy 或Ant，只是一个建议。对于解决方案检查this answer，它应该可以正常工作。

【参考方案4】：

我让它为我工作。试试这个：

$("#curCarSelect").on('click', function(e) 
    $("#curCarModal").on('show.bs.modal', function(event) 
        modalOpenedby = event.relatedTarget; 
        alert(modalOpenedby);
    ).modal('toggle', e);
);

【参考方案5】：

解决方法在引导程序 2 上对我有用：

$("a[data-toggle='modal']").on('click', function(e) 
    $_clObj = $(this); //clicked object
    $_mdlObj = $_clObj.attr('data-target'); //modal element id 
    $($_mdlObj).on('shown.bs.modal', _clObj: $_clObj , function (event) 
           $_clObj = event.data._clObj; //$_clObj is the clicked element !!!
           //do your stuff here...
    );
);

【参考方案6】：

试试这个：

$('#curCarModal').on('shown.bs.modal', function () 
    modalOpenedby = event.relatedTarget; 
);

$("#curCarSelect").on('click', function(e) 
    $("#curCarModal").modal('toggle'); 
    alert(modalOpenedby);
);

【讨论】：

事件在 chrome 浏览器中自动传递，这在没有像 Firefox 那样自动传递事件的浏览器中可能会失败。