按钮单击在jquery中不起作用

时间：2017-02-28 07:05:17

标签： javascript jquery html

大家好，我是jquery的新手。

我正在jquery中尝试一个简单的添加。我有两个输入字段，在jquery我想在这些字段中添加数字。但是添加按钮没有触发。

JQuery 

$dirs = glob($path.'*', GLOB_ONLYDIR); // get all folders/directories
// loop in folders array
foreach ($dirs as $key => $val) {
    // cut "cover/" string from paths
    $dirs[$key] = str_replace("cover/", "", $val);
}
// check is folder with name "folderName" exists in array
if (in_array("folderName", $dirs)) {
    echo "Exists";
}

HTML 

<script type="text/javascript">
    $(document).ready(function () {
        //toggle div start
        $("#btn_do").click(function () {
            $(".div_chat").animate({
                width: "toggle"
            });
        });
        // toggle div end

        //Add button click
        $("btnplus").click(function () {
            alert("sdfdf");
            var val1 = $("#lblvalue1").val();
            var val2 = $("#lblvalue2").val();
            var added = parseInt( val1 )+ parseInt( val2);
            alert(added2);
            $("lbltext").val(added);
        });
        //add button click end

    });
</script>

人？提前谢谢。

9 个答案:

答案 0 :(得分：3)

您忘记了代码中的#。试试这个：

$("#btnplus").click(function () {
            alert("sdfdf");
            var val1 = $("#lblvalue1").val();
            var val2 = $("#lblvalue2").val();
            var added = parseInt( val1 )+ parseInt( val2);
            alert(added);
            $("#lbltext").val(added);
        });

答案 1 :(得分：3)

$("#btnplus").click(function () {
        alert("sdfdf");
        var val1 = $("#lblvalue1").val();
        var val2 = $("#lblvalue2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
        $("#lbltext").val(added);
    });

答案 2 :(得分：3)

有多个问题阻止您的代码正常运行。我在下面的代码段中修复了所有这些内容。总结：

  • 您的按钮的ID为btnplus。要在jQuery查询中引用ID，您需要使用＃前缀，即$（＆＃34; #btnplus＆＃34;）
  • 您的变量added2未定义。这应该是added。
    • 应该在input标记上调用
  • val（），即#value1，而不是label标记
  • 最佳做法是调用parseInt（x，10）而不是parseInt（）
  • 标签中的ID应为id小写。
  • $("lbltext")应为$("#lbltext")

＆＃13;
＆＃13; 
//toggle div start
$("#btn_do").click(function() {
  $(".div_chat").animate({
    width: "toggle"
  });
});
// toggle div end

//Add button click
$("#btnplus").click(function() {
  alert("sdfdf");
  var val1 = $("#value1").val();
  var val2 = $("#value2").val();
  var added = parseInt(val1, 10) + parseInt(val2, 10);
  alert(added);
  $("#lbltext").text(added);
});
//add button click end
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
  <div>
    <asp:Label ID="lblLabel" runat="server"></asp:Label>
    <button id="btn_do" type="button">toggle</button>
  </div>
  <div></div>
  <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
    <label id="lblvalue1">Value 1</label>
    <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <br />
    <label id="lblvalue2">Value 2</label>
    <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <button id="btnplus" type="button"> ADD</button>
    <br />
    <asp:Label id="lbltext" runat="server">tesst</asp:Label>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：3)

您遗失了#

中的$("btn_do")

另外，var val1 = $("#lblvalue1").val();是错误的，因为您没有lblvalue1的ID，$("#value1") value2

last“typeo”为alert(added2);，因为added2不存在

$(document).ready(function() {
  //toggle div start
  $("#btn_do").click(function() {
    $(".div_chat").animate({
      width: "toggle"
    });
  });
  // toggle div end

  //Add button click
  $("#btnplus").click(function() {
    alert("sdfdf");
    var val1 = $("#value1").val();
    var val2 = $("#value2").val();
    var added = (parseInt(val1) + parseInt(val2));
    alert(added);
    $("lbltext").val(added);
  });
  //add button click end

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
  <div>
    <asp:Label ID="lblLabel" runat="server"></asp:Label>
    <button id="btn_do" type="button">toggle</button>
  </div>
  <div></div>
  <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
    <label id="lblvalue1">Value 1</label>
    <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <br />
    <label id="lblvalue2">Value 2</label>
    <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <button id="btnplus" type="button"> ADD</button>
    <br />
    <asp:Label ID="lbltext" runat="server">tesst</asp:Label>
  </div>
</form>

答案 4 :(得分：3)

您忘记了ID选择器（#）。如下所示

$("#btnplus").click(function () {

还需要改变那里： - 

$("#btnplus").click(function () {
    var val1 = $("#value1").val();//change of id
    var val2 = $("#value2").val();//change of id
    var added = parseInt( val1 )+ parseInt( val2);
    alert(added);//change of variable name
   $("span[id$='lbltext']").text(added);
});

工作示例： - 

$(document).ready(function () {
    //toggle div start
    $("#btn_do").click(function () {
        $(".div_chat").animate({
            width: "toggle"
        });
    });
    // toggle div end

    //Add button click
    $("#btnplus").click(function () {
        var val1 = $("#value1").val();
        var val2 = $("#value2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
       $("span[id$='lbltext1']").text(added);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form id="form1" runat="server">
    <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
    <div>
        <asp:Label ID="lblLabel" runat="server"></asp:Label>
        <button id="btn_do" type="button">toggle</button>
    </div>
    <div></div>
    <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
        <label id="lblvalue1">Value 1</label>
        <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <br />
        <label id="lblvalue2">Value 2</label>
        <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <button id="btnplus" type="button" > ADD</button>
        <br />
        <!--<asp:Label id="lbltext" runat="server">tesst</asp:Label>-->
        <span id = "lbltext1"></span>
    </div>
</form>

答案 5 :(得分：3)

您需要使用＃来应用点击事件。

$("#btnplus").click(function () {
    alert("sdfdf");
    var val1 = $("#lblvalue1").val();
    var val2 = $("#lblvalue2").val();
    var added = parseInt( val1 )+ parseInt( val2);
    alert(added2);
    $("lbltext").val(added);
});

答案 6 :(得分：2)

确保在使用jQuery时添加id和类选择器。 （分别为'＃'和'。'。

$("#btnplus").click(function () {
    // code
});

另外，在这里遗漏了一个：

("#lbltext").val(added);

答案 7 :(得分：2)

replace the code,
$("#btnplus").click(function () {
        alert("sdfdf");
        var val1 = $("#value1").val();
        alert(val1);
        var val2 = $("#value2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
        $("lbltext").val(added);
    });

答案 8 :(得分：1)

您将btnplus作为按钮ID。并且您将其用作选择器，因此您必须使用前面的#符号将此按钮定位为

$("#btnplus").click(function () {
    // Your code goes here
});
相关问题
最新问题