javascript - Javascript else if 语句不起作用

Question

我有以下内容：

HTML

<div class="tab-pane" id="message">
      <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

JavaScript

$('#message').click(function(){
    if($("a", this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } else if($("a", this).is(":contains(Cancel)"))  {
        console.log("im in cancel!!");
    }
});

当我点击 OK 按钮并按预期执行时，这工作正常，但是当我点击取消时，仅执行 OK 中的代码。取消代码永远不会执行！我究竟做错了什么？

Answer 1

this是事件绑定的元素。它总是 #message，因此$("a", this)总是两个按钮。 .is将扫描两个按钮以查看其中是否包含"OK". 第一个是，所以它总是去第一个块。

您应该将事件绑定到按钮本身，而不是整个 div。

Answer 2

而是检测a来自 的点击。将成为 clicked 。#messagethis<a>

$('#message').on("click", "a", function(){
    if($(this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } 
    else if($(this).is(":contains(Cancel)"))  {
            console.log("im in cancel!!");
    }
});

JSFIDDLE

Answer 3

拳头，我注意到您缺少结束 div ( </div>)

只是好奇，为什么不做以下事情：

$("#OK").click (function() {
    console.log("im in OK!!");
});

$("#Cancel").click (function() {
    console.log("im in Cancel!!");
});

<div class="tab-pane" id="message">
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
    <a href="#message" id="OK" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
    <a href="#message" id="Cancel" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>
</div>

干杯。