修改

Question

我正在使用Jquery Flip创建一个闪存卡游戏。我有以下内容：

<div id="card" style="width: 300px;">
    <div class="front" style=" height:200px; width:200px; background-color:#d9edf7;">
    </div>

    <div class="back" style=" height:200px; width:200px; background-color: #eee;">
    </div>
</div>

这是在名为_SafmedDialog

的部分视图中进行的

当我点击前面的div时，它会检查答案，当你点击后面的div时，它会获取下一个问题。

$("#card").flip();

$('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
})

$('div.back').click(function () {

    GetQuestion();
})

如果你点击div上的任何地方，除了_SafmedQuestion内的文本框

，我希望它只能去获取下一个问题

    @Html.EditorFor(x => x.Answer, new { id = "answer" })
    @Html.HiddenFor(x => x.SafmedId, new { id = "safmedId" })


<script type="text/javascript">

    $(document).ready(function () {
        $('#Answer').focus();
    })

</script>

我发现了这个问题：jquery click bind on div effecting textbox residing within

然而，当我将我的javascript更改为：

$('div.front').click(function (e) {
    if (e.target.id === "Answer") {
        return;
    }
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
})

卡仍然翻转并执行CheckAnswer方法，我做错了什么？

Answer 1

在点击事件中

，确保获取事件参数并调用事件stopPropagation method

<强>更新要使您的点击事件不会冒泡到其父级，请执行以下操作：

$('div.front').click(function (e) {
  if (e.target.id === "Answer") {
    e.stopPropagation();
    return false;
  }
  CheckAnswer($('#safmedId').val(), $('#Answer').val());
});

Answer 2

我对MVC并不熟悉，但不会

@Html.EditorFor(x => x.Answer, new { id = "answer" })

生成一个带有小写'answer'的id。你所有的javascript都在寻找大写的'Answer'。它们不是===。

Answer 3

我认为它失败了因为点击功能总是在.front div上。您可能希望在单击答案div之后打开单击处理程序，如下所示：

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
  });
});

这应该只在点击#answer内后检查答案。

修改

抱歉，我查看了你的最后一个代码块并且混淆了你想要的东西。您希望代码仅在单击答案后才能执行，因此将两个函数放在答案中单击：

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
    $("#card").flip();
  });
  $('div.back').click(function () {
    GetQuestion();
  }); 
});

这将使得在点击答案之前不会发生任何事情。然后，如果他们点击.front div，它将检查答案并翻转卡片（假设卡片翻转，按照您的喜好移动）。然后，如果他们点击.back div，则只有在他们选择了答案后才会转到下一个问题。

除文本框外，单击div上的事件

3 个答案:

修改