Question

在我的应用程序中，如果有某种评分部分，用户可以通过单击+/-按钮来增加/减少玩家的分数。

由于玩家得分由多个部分组成，因此会在+/-按钮的每个click上计算总结得分。

总结得分是一个简单的span - 包含得分的元素。

有什么方法可以绑定到自定义事件，如：

$("#mySpanElement").on("namespace.scorechange", function(evt, someAdditionalData){
    // update content by fetching values from event and summarize score

    // set new value
    $(this).text(myCalculatedScore);
});

并在每次点击按钮时触发它？

$("#increaseButton1").on("click", function(){
    // do some stuff -> e.g. updating ui

    // fire event that score has been changed and span can update its content
    $.event.trigger("namespace.scorechange"); // not working
    $(document).trigger("namespace.scorechange"); // not working
});

所以，我正在寻找一种绑定到自定义事件的方法，这些事件可以在应用程序中触发。有什么想法吗？

Answer 1

您需要触发span元素的事件。

$("#mySpanElement").on("scorechange.namespace", function(evt, someAdditionalData) {
  snippet.log('event fired: ' + evt.type)
});


$("#increaseButton1").on("click", function() {
  $("#mySpanElement").trigger('scorechange.namespace');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<span id="mySpanElement"></span>
<button id="increaseButton1">Test</button>

如果您不知道必须触发哪个事件，那么最好将处理程序绑定到文档对象，如下所示，在处理程序内部，您可以定位所需的任何元素。

$(document).on("scorechange.namespace", function(evt, someAdditionalData) {

  $("#mySpanElement").text(someAdditionalData);

  snippet.log('event fired: ' + evt.type)
});

var counter = 0;
$("#increaseButton1").on("click", function() {
  $(document).trigger('scorechange.namespace', 'Click: ' + ++counter);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<span id="mySpanElement"></span>
<button id="increaseButton1">Test</button>

jQuery - 自定义事件绑定

1 个答案: