无法在webui-popover

Question

我正在开发一个应用信息中心，我试图在webui-popover内添加一个jquery计算器。计算器在弹出窗口外工作正常，但当它在popover div内部时它无法正常工作。该插件的作者说＆＃34;这个问题是由插件停止事件冒泡引起的＃34;，

我对Jquery或Javascript知之甚少，如果有人能帮助我，那将会很好。那么，有没有办法让计算器在popover元素内工作？。

计算器脚本取自HERE

以下是代码

＆＃13;

＆＃13;

/* WEBUI SCRIPT*/
(function() {
  var settings = {
    trigger: 'click',
    title: '',
    width: 320,
    multi: true,
    closeable: false,
    style: '',
    delay: 300,
    padding: true
  };

  function initPopover() {
    var tableContent = $('#discalc').html(),
      tableSettings = {
        content: tableContent,
        width: 298
      };
    $('a.showdisclac').webuiPopover('destroy').webuiPopover($.extend({}, settings, tableSettings));
  }

  initPopover();
})();


/* CALCULATOR */

$("document").ready(function() {
  var key = null;

  $(document).on("click", ".clean", function() {
    $('.input').val("");
  });

  $(document).on("click", ".Show", function() {
    var EText = $('#Result').val();
    if (EText != "0") {
      var val1 = EText;
      var ButtonVal = $(this);
      var val2 = ButtonVal.text();
      var Res = val1 + val2;
      $('#Result').val(Res);
    } else {
      $('#Result').val();
    }
  });

  $(function(e) {
    var interRes = null;
    var operator;
    $(document).on("click", ".operators", function(e) {
      var value1 = $('#Result').val();
      if (interRes != null) {
        var result = ApplyOperation(interRes, value1, operator);
        interRes = result;
      } else {
        interRes = value1;
      }
      operator = $(this).text();
      $('input').val("");
    });
    $(document).on("keypress", "#Result", function(e) {
      if ((e.keyCode == 61)) {
        var op = operator;
        var res;
        var value2 = $('#Result').val();
        if ((value2 != "")) {
          var data = value2.split("+");
          if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
          else res = ApplyOperation(interRes, data[1], op);
        } else {
          res = interRes;
        }
        $('#Result').val(res);
        interRes = null;
      } else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
        var value1 = $('#Result').val();
        var inter = (interRes != null);
        if (inter) {
          var op = operator;
          var data = value1.split("+");
          if (data.length > 2) {
            operator = String.fromCharCode(e.keyCode);
            result = ApplyOperation(interRes, data[data.length - 1], op);
            interRes = result;
          } else {
            operator = String.fromCharCode(e.keyCode);
            result = ApplyOperation(interRes, data[1], op);
            interRes = result;
          }
        } else {
          interRes = value1;
        }
        operator = String.fromCharCode(e.keyCode);
        $('.input').text("");
      }
    });
    $(document).on("click", "#Calculate", function(e) {
      var op = operator;
      var res;
      var value2 = $('#Result').val();
      if ((value2 != "")) {
        res = ApplyOperation(interRes, value2, op);
      } else {
        res = interRes;
      }
      $('#Result').val(res);
      interRes = null;
    });
  });

  function ApplyOperation(value1, value2, operator) {
    var res;
    switch (operator) {
      case "+":
        res = addition(value1, value2);
        break;
      case "-":
        res = subtraction(value1, value2);
        break;
      case "*":
        res = multiplication(value1, value2);
        break;
      case "/":
        res = division(value1, value2);
        break;
    }
    return res;
  }

  function addition(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var total = a + b;
    return total;
  }

  function subtraction(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var sub = a - b;

    return sub;
  }

  function multiplication(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var product = a * b;

    return product;
  }

  function division(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var divi = a / b;
    return divi;
  }

});

＆＃13;

<link rel="stylesheet" type="text/css" href="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.css"> .webui-popover-content {
  padding: 0;
}
.webui-popover {
  padding: 0;
  border: none;
  border: 0;
  background: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.webui-popover.top>.arrow:after,
.webui-popover.top-right>.arrow:after,
.webui-popover.top-left>.arrow:after {
  border-top-color: #525252;
}
.discalc {
  display: none;
}
.disresform {
  background: #525252;
  padding: 20px 5px 20px 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  bottom: 0;
  position: absolute;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.js"></script>


<a href="#" class="showdisclac" id="showdisclac" data-placement="auto-top" data-animation="pop" data-target="discalc">Discount</a>


<div id="discalc" class="discalc">
  <div class="disresform">
    <h2>Simple Calculator</h2>

    <input id="Result" class="input" value="0" />
    <div id="keys">
      <div id="FirstRow">
        <button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
        <button id="Clear" type="reset" value="C" class="clean">C</button>
        <button id="Add" type="button" value="+" class="operators operand">+</button>
      </div>
      <div id="SecondRow">
        <button id="One" type="button" value="1" class="Show">1</button>
        <button id="Two" type="button" value="2" class="Show">2</button>
        <button id="Three" type="button" value="3" class="Show">3</button>
        <button id="Sub" type="button" value="-" class="operators operand">-</button>
      </div>
      <div id="ThirdRow">
        <button id="Four" type="button" value="4" class="Show">4</button>
        <button id="Five" type="button" value="5" class="Show">5</button>
        <button id="six" type="button" value="6" class="Show">6</button>
        <button id="Mul" type="button" value="*" class="operators operand">*</button>
      </div>
      <div id="FourthRow">
        <button id="Seven" type="button" value="7" class="Show">7</button>
        <button id="Eight" type="button" value="8" class="Show">8</button>
        <button id="Nine" type="button" value="9" class="Show">9</button>
        <button id="Divide" type="button" value="/" class="operators operand">/</button>
      </div>
      <div id="FifthRow">
        <button id="Zero" type="button" value="0" class="Show">0</button>
        <button id="Dot" type="button" value="." class="Show">.</button>
        <button id="Calculate" type="button" value="=" class="operand">=</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用dismissible:false

/* WEBUI SCRIPT*/
(function() {
  var settings = {
    trigger: 'click',
    title: '',
    width: 320,
    multi: true,
    closeable: false,
    style: '',
    delay: 300,
    padding: true,
    dismissible:false
  };

  function initPopover() {
    var tableContent = $('#discalc').html(),
      tableSettings = {
        content: tableContent,
        width: 298
      };
    $('a.showdisclac').webuiPopover('destroy').webuiPopover($.extend({}, settings, tableSettings));
  }

  initPopover();
})();


/* CALCULATOR */

$("document").ready(function() {
  var key = null;

  $(document).on("click", ".clean", function() {
    $('.input').val("");
  });

  $(document).on("click", ".Show", function() {
    var EText = $('#Result').val();
    if (EText != "0") {
      var val1 = EText;
      var ButtonVal = $(this);
      var val2 = ButtonVal.text();
      var Res = val1 + val2;
      $('#Result').val(Res);
    } else {
      $('#Result').val();
    }
  });

  $(function(e) {
    var interRes = null;
    var operator;
    $(document).on("click", ".operators", function(e) {
      var value1 = $('#Result').val();
      if (interRes != null) {
        var result = ApplyOperation(interRes, value1, operator);
        interRes = result;
      } else {
        interRes = value1;
      }
      operator = $(this).text();
      $('input').val("");
    });
    $(document).on("keypress", "#Result", function(e) {
      if ((e.keyCode == 61)) {
        var op = operator;
        var res;
        var value2 = $('#Result').val();
        if ((value2 != "")) {
          var data = value2.split("+");
          if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
          else res = ApplyOperation(interRes, data[1], op);
        } else {
          res = interRes;
        }
        $('#Result').val(res);
        interRes = null;
      } else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
        var value1 = $('#Result').val();
        var inter = (interRes != null);
        if (inter) {
          var op = operator;
          var data = value1.split("+");
          if (data.length > 2) {
            operator = String.fromCharCode(e.keyCode);
            result = ApplyOperation(interRes, data[data.length - 1], op);
            interRes = result;
          } else {
            operator = String.fromCharCode(e.keyCode);
            result = ApplyOperation(interRes, data[1], op);
            interRes = result;
          }
        } else {
          interRes = value1;
        }
        operator = String.fromCharCode(e.keyCode);
        $('.input').text("");
      }
    });
    $(document).on("click", "#Calculate", function(e) {
      var op = operator;
      var res;
      var value2 = $('#Result').val();
      if ((value2 != "")) {
        res = ApplyOperation(interRes, value2, op);
      } else {
        res = interRes;
      }
      $('#Result').val(res);
      interRes = null;
    });
  });

  function ApplyOperation(value1, value2, operator) {
    var res;
    switch (operator) {
      case "+":
        res = addition(value1, value2);
        break;
      case "-":
        res = subtraction(value1, value2);
        break;
      case "*":
        res = multiplication(value1, value2);
        break;
      case "/":
        res = division(value1, value2);
        break;
    }
    return res;
  }

  function addition(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var total = a + b;
    return total;
  }

  function subtraction(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var sub = a - b;

    return sub;
  }

  function multiplication(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var product = a * b;

    return product;
  }

  function division(first, second) {
    var a = parseFloat(first);
    var b = parseFloat(second);
    var divi = a / b;
    return divi;
  }

});

<link rel="stylesheet" type="text/css" href="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.css"> .webui-popover-content {
  padding: 0;
}
.webui-popover {
  padding: 0;
  border: none;
  border: 0;
  background: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.webui-popover.top>.arrow:after,
.webui-popover.top-right>.arrow:after,
.webui-popover.top-left>.arrow:after {
  border-top-color: #525252;
}
.discalc {
  display: none;
}
.disresform {
  background: #525252;
  padding: 20px 5px 20px 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.js"></script>


<a href="#" class="showdisclac" id="showdisclac" data-placement="auto-top" data-animation="pop" data-target="discalc">Discount</a>


<div id="discalc" class="discalc">
  <div class="disresform">
    <h2>Simple Calculator</h2>

    <input id="Result" class="input" value="0" />
    <div id="keys">
      <div id="FirstRow">
        <button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
        <button id="Clear" type="reset" value="C" class="clean">C</button>
        <button id="Add" type="button" value="+" class="operators operand">+</button>
      </div>
      <div id="SecondRow">
        <button id="One" type="button" value="1" class="Show">1</button>
        <button id="Two" type="button" value="2" class="Show">2</button>
        <button id="Three" type="button" value="3" class="Show">3</button>
        <button id="Sub" type="button" value="-" class="operators operand">-</button>
      </div>
      <div id="ThirdRow">
        <button id="Four" type="button" value="4" class="Show">4</button>
        <button id="Five" type="button" value="5" class="Show">5</button>
        <button id="six" type="button" value="6" class="Show">6</button>
        <button id="Mul" type="button" value="*" class="operators operand">*</button>
      </div>
      <div id="FourthRow">
        <button id="Seven" type="button" value="7" class="Show">7</button>
        <button id="Eight" type="button" value="8" class="Show">8</button>
        <button id="Nine" type="button" value="9" class="Show">9</button>
        <button id="Divide" type="button" value="/" class="operators operand">/</button>
      </div>
      <div id="FifthRow">
        <button id="Zero" type="button" value="0" class="Show">0</button>
        <button id="Dot" type="button" value="." class="Show">.</button>
        <button id="Calculate" type="button" value="=" class="operand">=</button>
      </div>
    </div>
  </div>
</div>