Невозможно тигрировать элементы внутри webui-popover

Question

Я работаю над панелью приложений, где я пытаюсь добавить калькулятор jquery внутри webui-popover. калькулятор работает отлично за пределами popover, но когда он находится внутри div, он не работает. Автор плагина сказал: «Эта проблема вызвана тем, что плагин останавливает пузырь событий»,

У меня нет большого знания о JQuery или Javascript, если кто-нибудь может мне помочь, это будет хорошо. Итак, есть ли способ заставить калькулятор работать внутри элемента popover ?.

Калькулятор Сценарий взят из HERE

Здесь есть коды

/* 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; 
 
    } 
 

 
});

<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>

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>