jQuery插件第二个click点击事件不生效原因及解决方法求助

问题根因 #

你绑定#choices button点击事件的时机不对：

• 代码初始化执行时，先调用了setGameStart()，此时页面里只有选择游戏场次的DOM，根本不存在#choices相关的元素
• 此时执行$(this).find("#choices button").click(...)，找不到任何符合条件的DOM，事件绑定直接失效
• 后续在第一个点击事件里调用setGameProperties()插入#choices的DOM时，之前的绑定逻辑已经执行完了，不会自动给新插入的元素补绑定事件，所以点击按钮没有反应

解决方法 #

两种方案任选即可：

方案1：DOM插入完成后再绑定事件 #

把#choices button的绑定逻辑移到setGameProperties()函数的末尾，保证每次插入完#choices的DOM之后再绑定事件：

function setGameProperties(){
    $gameDiv.empty();
    html = ('<img src="images\\question.png" id="player1" alt="Item 1">\
    <img src="images\\question.png" id="player2" alt="Item 2">\
    <br>\
    <h3 id="score">0 - 0</h3>\
    <br>\
    <div id="choices">\
        <button type="button" id="1" value="1">Rock</button>\
        <button type="button" id="2" value="2">Paper</button>\
        <button type="button" id="3" value="3">Sissors</button>\
    </div>');
    $gameDiv.append(html);
    $("img").css({
        "width": settings.imageWidth,
        "height": settings.imageHeight,
        "border": settings.imageBorder,
        "border-radius": settings.borderRadius
    });

    $gameDiv.css({
        "text-align": "center",
    });
    
    // 把#choices按钮的绑定逻辑移到这里
    $gameDiv.find("#choices button").click(function(event){
        event.preventDefault();
        console.log("TEST");
    });
};

然后删掉原来在初始化阶段写的$(this).find("#choices button").click(...)那部分代码即可。

方案2：使用事件委托绑定到固定父元素 #

利用jQuery的事件冒泡机制，把事件绑定到始终存在的父元素$gameDiv上，不需要关心子元素什么时候插入：
把原来的$(this).find("#choices button").click(...)替换为下面的代码即可，不用改动其他逻辑：

$gameDiv.on("click", "#choices button", function(event){
    event.preventDefault();
    console.log("TEST");
});

这种方案更简洁，也不需要每次插入DOM都重新绑定事件。

内容的提问来源于stack exchange，提问作者Nicholas