处理动态项中的值 Jquery

Question

我在 jquery 准备计算器。使用 static HTML 时，显示、处理按钮的值没有问题，但是当我想让它动态时，我卡在了原地。我无法从按钮获取值并显示它。

HTML:

<body>
    <div id="result">test</div>
    <input type="button" value="Calc" id="cal"/>
    <div id="content"></div>
</body>

我的脚本：

$(function(){
$("#cal").click(function(){
    $("#content").append(
            "<div id='container'>"+
                "<input disabled='disabled' type='text' id='display' onclick=''>" +
            "<div>" +
                "<input type='button' class='signbutton' value='(' id='paramO' onclick=''>" +
                "<input type='button' class='signbutton' value=')' id='paramC' onclick=''>" +
                "<input type='button' class='signbutton' value='%' id='modulo' onclick=''>" +
                "<input type='button' class='signbutton' value='C' id='clear' onclick=''>" +
            "</div>"+
            "</div>"
});

现在我想在 "display field" 中显示按钮的值。

$(".signbutton").click(function(){ 
    var i = $(this).val();
    $("#display").val($("#display").val() + i)
}

我也试过这样的解决方案：

$("#container").on("click", $(".signbutton"), function(event){
    var i = $(event.target).val();
    $("#display").val($("#display").val() + i)
}

Answer 1

您的代码存在非右括号问题。

查看包含这些修复的代码片段

$(function() {
  $("#cal").click(function() {
    $("#content").append(
      "<div id='container'>" +
      "<input disabled='disabled' type='text' id='display' onclick=''>" +
      "<div>" +
      "<input type='button' class='signbutton' value='(' id='paramO' onclick=''>" +
      "<input type='button' class='signbutton' value=')' id='paramC' onclick=''>" +
      "<input type='button' class='signbutton' value='%' id='modulo' onclick=''>" +
      "<input type='button' class='signbutton' value='C' id='clear' onclick=''>" +
      "</div>" +
      "</div>");

    $(".signbutton").click(function() {
      var i = $(this).val();
      $("#display").val($("#display").val() + i)
    });


    /*

    $("#container").on("click", $(".signbutton"), function(event){
        var i = $(event.target).val();
        $("#display").val($("#display").val() + i)
    }*/
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="result">test</div>
  <input type="button" value="Calc" id="cal" />
  <div id="content"></div>
</body>

现在显示使用您的第一种方法的值。

Answer 2

您的函数声明在语法规则方面存在问题。并在附加控件后定义 .signbutton 的 click 事件。

$(function(){
 $("#cal").click(function(){
  $("#content").append(
    "<div id='container'>"+
     "<input disabled='disabled' type='text' id='display' onclick=''>" +
    "<div>" +
     "<input type='button' class='signbutton' value='(' id='paramO' onclick=''>" +
     "<input type='button' class='signbutton' value=')' id='paramC' onclick=''>" +
     "<input type='button' class='signbutton' value='%' id='modulo' onclick=''>" +
     "<input type='button' class='signbutton' value='C' id='clear' onclick=''>" +
    "</div>"+
    "</div>");
  $(".signbutton").click(function(){ 
   var i = $(this).val();
   $("#display").val($("#display").val() + i)
  });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">test</div>
    <input type="button" value="Calc" id="cal"/>
    <div id="content"></div>

Answer 3

正如大家之前提到的，您应该修复语法，但据我了解您的问题，他们并没有真正回答这个问题。

首先，我建议将您的 jQuery 代码包装在

中

$(document).ready(function() {
//code here
});

我为你想出了这个代码：

"<input type='button' class='signbutton' value='(' id='paramO' onclick='$(\"#display\").val($(\"#display\").val() + $(this).attr(\"value\"));'>"

此代码将输入的值设置为 "Current value + the value of the button"

有点忙，因为我是在旅途中完成的，可能会有一些打字错误，但我希望我能帮助到你。

处理动态项中的值 Jquery

Handling value in dynamic items Jquery

javascript

jquery

dynamic

calculator

查看包含这些修复的代码片段