如何将单击处理程序添加到自定义jQuery UI小部件并使用小部件'；处理程序中的属性？

我已经为我的问题准备了一份报告

我定义了一个自定义jQuery UI小部件，它表示一个最多有4名玩家的游戏表，中间有一个白色gid（“游戏id”）号：

以下是我的代码（与JSFIDLE中的代码相同）：

$（函数（）{
var PHOTO_PATTERN=/^https:\/\/\S+/i；
$.widget（'raspasy.table'{
//默认选项
选项：{
基德：南，
player0:null，
player1:null，
player2:null，
player3:null
},
_创建：函数（）{
this.element.addClass（'raspasy-table'）；
this.gidDiv=$（“”{
“类”：“raspasy表gid”
}).appendTo（此元素）；
this.player0=$（“”{
“类”：“raspasy-table-player0”
}).appendTo（此元素）；
this.player1=$（“”{
“类”：“raspasy-table-player1”
}).appendTo（此元素）；
this.player2=$（“”{
“类”：“raspasy-table-player2”
}).appendTo（此元素）；
this.player3=$（“”{
“类”：“raspasy-table-player3”
}).appendTo（此元素）；
this.rep0=$（“”{
“类”：“raspasy玩家代表”
}).appendTo（此.player0）；
this.bad0=$（“”{
'class'：'raspasy player bad small'
}).appendTo（this.rep0）；
this.good0=$（''{
'class'：'raspasy player good small'
}).appendTo（this.rep0）；
this.rep1=$（“”{
“类”：“raspasy玩家代表”
}).appendTo（本播放器1）；
this.bad1=$（“”{
'class'：'raspasy player bad small'
}).附录（本.rep1）；
this.good1=$（''{
'class'：'raspasy player good small'
}).附录（本.rep1）；
this.rep2=$（“”{
“类”：“raspasy玩家代表”
}).appendTo（this.player2）；
this.bad2=$（“”{
'class'：'raspasy player bad small'
}).附录（本附录2）；
this.good2=$（''{
'class'：'raspasy player good small'
}).附录（本附录2）；
this.rep3=$（“”{
“类”：“raspasy玩家代表”
}).appendTo（本播放器3）；
this.bad3=$（“”{
'class'：'raspasy player bad small'
}).附录（本附录3）；
this.good3=$（''{
'class'：'raspasy player good small'
}).附录（本附录3）；
这个；
},
_销毁：函数（）{
this.good0.remove（）；
this.bad0.remove（）；
this.rep0.remove（）；
这个.good1.remove（）；
this.bad1.remove（）；
this.rep1.remove（）；
这个.good2.remove（）；
这个.bad2.remove（）；
this.rep2.remove（）；
这个.good3.remove（）；
这个.bad3.remove（）；
this.rep3.remove（）；
this.player0.remove（）；
this.player1.remove（）；
this.player2.remove（）；
this.player3.remove（）；
this.gidDiv.remove（）；
this.element.removeClass（'raspasy-table'）；
},
_setOptions:function（）{
这是超级应用（参数）；
这个；
},
_drawPerson:function（playerDiv、badDiv、goodDiv、playerJson）{
if（playerJson）{
var photo=（photo_PATTERN.test（playerJson.photo）？playerJson.photo:'https://raspasy.de/raspasy/images/male_happy.png');
css（'background-image'，'url（'+photo+'）；
var rep=parseFloat（playerJson.rep）；
如果（0要解决此问题，您需要使用
.on（）
进行单击，并通过Getter调用
gid

例如：

JavaScript

  $("#tablesList").on("click", ".raspasy-table", function() {
    var myID = $(this).table("option", "gid");
    console.log('table clicked: ' + myID);
    alert('table clicked: ' + myID);
  });

我建议将其移动到
\u create
函数中。要执行此操作，请在创建表后添加
。单击（）

示例：
在您的JSFIDLE中，您是否在控制台中看到Chrome Developer工具错误？未捕获引用错误：table1未在？editor_console=：378中定义。我认为这是一个范围问题。如果删除
//主脚本下方的代码，则错误消失。因此我认为我的问题仍然有效：如何向每个脚本添加单击处理程序table小部件并在处理程序中使用
gid
？您刚刚修复了它吗？我发现您的代码不在document.ready函数或$（function（））中，因为
gid
是选项的一部分，您可以从getter中读取它：
$（this）。table（“option”，“gid”）；
谢谢您的精彩回答（一如既往）。你能看一下更新的问题吗？如果我有
$（'#tablelist'）。可选（）；
则不会调用单击处理程序。@AlexanderFarber Selective不应干扰，它只会向所选项目添加一个类。如果您看到两个事件处理程序，可能其中一个无法冒泡到另一个。我建议您调查或打开一个新问题。