Question

以下函数使用Bootstrap和JQuery显示模态。为了使其灵活，我想添加任意多个按钮，并在按下这些按钮时绑定功能。

blnShowWindow("This is <b>html</b> content", "This is a title", [
{strTitle: 'CCancel', strStyle: 'default', fncAction: function() { alert("ccccc"); } },
{strTitle: 'OOK', strStyle: 'primary', fncAction: function() { alert("ok"); } }]);

在另一个地方：

intButtonC = 0;
blnShowWindow = function (htmlContent, strTitle, arrButtons) {
  //....
  $.each(arrButtons, function (intIndex, arrButton) {
    intButtonC += 1;
    strButtonID = "btnModalButton" + intButtonC;
    $("#divModalFooter").html($("#divModalFooter").html() + 
      '<button type="button" class="btn btn-'+arrButton.strStyle+
      '" id="'+strButtonID+'">'+arrButton.strTitle+'</button>');
    $("#"+strButtonID).unbind().bind("click",arrButton.fncAction);
  });
  $("#divModal").modal();
};

两个按钮，CCancel和OOK都很好。单击OOK时，会出现一个警告框，显示“ok”。问题是，CCancel在点击时没有做任何事情。数组定义是否正确？我做错了什么？

还有更好的方法来定义高度灵活的Bootstrap Modals吗？

Answer 1

问题是你要在行中覆盖已经绑定的按钮......

 $("#divModalFooter").html($("#divModalFooter").html() + ...

例如，如果您尝试此操作，则代码可以正常工作

intButtonC = 0;
blnShowWindow = function (htmlContent, strTitle, arrButtons) {
  $.each(arrButtons, function (intIndex, arrButton) {
    intButtonC += 1;
    strButtonID = "btnModalButton" + intButtonC;
    $("#divModalFooter").html($("#divModalFooter").html() + 
      '<button type="button" class="btn btn-'+arrButton.strStyle+
      '" id="'+strButtonID+'">'+arrButton.strTitle+'</button>');

  });

    intButtonC = 0;
  $.each(arrButtons, function(intIndex, arrButton){
    intButtonC += 1;
    strButtonID = "btnModalButton" + intButtonC;
    $("#"+strButtonID).unbind().bind("click",arrButton.fncAction);
  });

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

在另一个中你绑定所有按钮

Bootstrap模态绑定按钮通过数组中的函数执行操作

1 个答案: