1

私は次のものを持っています：

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 のコードのみが実行されます。キャンセル コードは実行されません。私は何を間違っていますか？

4

3 に答える 3

9

thisイベントがバインドされる要素です。常に で#messageあるため、$("a", this)常に両方のボタンになります。 .is両方のボタンをスキャンして、それらのいずれかに が含まれているかどうかを確認します"OK"。最初のものはそうするので、常に最初のブロックに行きます。

div全体ではなく、ボタン自体にイベントをバインドする必要があります。

于 2013-08-12T18:17:02.203 に答える
2

a代わりにからのクリックを検出します#message。thisクリックされた になります<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

于 2013-08-12T18:17:22.447 に答える
1

まず、終了 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>

乾杯。

于 2013-08-12T18:19:15.093 に答える