如何检测调用哪个按钮

Question

我有表格。我添加两个按钮使用JQuery。我怎样才能得到这个按钮的名字？

<form id="frm">
</form>
//JQuery:
    $("#frm").append('<input class="btn" type="submit" name="GoTest"  value="Preview"/>');
    $("#frm").append('<input class="btn" type="submit" name="GoTest1" value="Next"/>'); 
$("#frm").on("click",  function () {
if (this...=="Next")
 {
  alert("It's button Next");
 }else
 {
  alert("It's button Preview");
 }
});

Answer 1

在你的问题中，你要求提供名字，但是文字“下一步”是值......所以试试这个：

$("#frm").on("click", '.btn',  function (e) {
    e.preventDefault();
    if (this.value=="Next")
     {
          alert("It's button Next");
     }else
     {
          alert("It's button Preview");
     }
});

如果您想获取名称，可以在点击功能中使用$(this).prop('name');。

Answer 2

if($(this).val() == "Next"){

}

Answer 3

您需要使用.on()的事件委派语法：

 $("#frm").append('<input class="btn" type="submit" name="GoTest"  value="Preview"/>');
 $("#frm").append('<input class="btn" type="submit" name="GoTest1" value="Next"/>');

 $('#frm').on('click', '.btn', function () {
     console.log($(this).attr('name'))
 });

<强> jsFiddle example

$(this).attr('name')获取您要求的名称，但是如果您想要该值，请改用$(this).val()。

Answer 4

$("#frm").on("click",  function (event) {
if (event.target.attr("value") === "Next")
 {
  alert("It's button Next");
 }else
 {
  alert("It's button Preview");
 }
});

Answer 5

按钮的名称与按钮的值不同。

$("#frm").on("click",  function (ev) {
    alert($(ev.currenTarget).prop('name'));
}

Answer 6

DEMO： jsFiddle

<强> HTML：

<form id="frm"></form>

<强> JS：

$(function () {
    $("#frm").append('<input class="btn" type="submit" name="GoTest"  value="Preview"/>');
    $("#frm").append('<input class="btn" type="submit" name="GoTest1" value="Next"/>');
    $("#frm > .btn").on("click", function (e) {
        e.preventDefault();
        if ($(this).val() == "Next") {
            alert("It's button Next");
        } else {
            alert("It's button Preview");
        }
    });
});

简化代码：

$(function () {
    $("#frm").append('<input class="btn" type="submit" name="GoTest"  value="Preview"/>');
    $("#frm").append('<input class="btn" type="submit" name="GoTest1" value="Next"/>');
    $("#frm > .btn").on("click", function (e) {
        e.preventDefault();

        alert("It's button " + $(this).val());
    });
});

没有使用CLASS ATTRITBUTE：jsFiddle

$(function () {
    $("#frm").append('<input class="btn" type="submit" name="GoTest"  value="Preview"/>');
    $("#frm").append('<input class="btn" type="submit" name="GoTest1" value="Next"/>');
    $("#frm > [name^='GoTest']").on("click", function (e) {
        e.preventDefault();

        alert("It's button " + $(this).val());
    });
});

的 Documentation 的

[attribute^=value]：名称属性值以值开头的所有元素。

更新：要使用子属性，请注意e.preventDefault（）将停止POST html标记的自动FORM。

Answer 7

单击按钮时可以存储按钮的名称，然后检测单击了哪个按钮。