jQuery事件授权

Question

我需要一些帮助与回调。由于某些原因，它们不能很好地工作。我正在用jQuery做一个游戏。我有一个 <div id='button'></div> 为所有的按钮，将在游戏中。游戏中会有两个按钮，可以进行操作，上面还有一个问题。问题是由一个 <h3 id='text'></h3>. 我想知道的是，由于某些原因，我不能为按钮的ID设置回调函数。例如，我可以通过jQuery设置自己的ID，比如 "是 "或 "否"。

$('#button').html('<button id='yes'>Yes</button><button id='no'></button>'); 但由于某些原因，我可以设置这个。

$('yes').click(function(){
  //function I would want
});

当然，我的代码不是这样的，这只是一个例子。这是真正的代码。

$(document).ready(function(){
    $('#main,#batman,#car,#cop,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood,#hr').hide(-100);
    var hr=$('#hr');
    var main=$('#main');
    var batman=$('#batman');
    var car=$('#car');
    var hobo=$('#hobo');
    var cop=$('#cop');
    var knife=$('#knife');
    var gangfight=$('#gangfight');
    var ganggun=$('#ganggun');
    var gangknife=$('#gangknife');
    var blood=$('#blood');
    var text=$('#text');
    var button=$('#button');
    $('#start').html('Are you ready to play?');
    $('#button').html('<button id="yes">Yes</button><button id="no">No</button>');
        $('#yes').click(function(){
            $('#yes,#no').hide(function(){
                $('#start').hide();
                main.fadeIn(-100);
                hr.fadeIn(-100,function(){
                text.delay(1000).html("You were just wandering around in the streets of new york, when suddenly.. You see batman!! You've never really liked him, what do you do?")
                    button.html('<button id="fight">Fight</button><button id="leave">Leave</button>',function(){
                        batman.fadeIn(1000);
                        $('fight').click(function(){
                        });
                        $('leave').click(function(){
                            text.fadeOut(function(){
                                text.text('Good call. As you leave, you encounter a hobo. What do you do?');
                            });
                        });
                    });
                });
            });
        });
        $('#no').click(function(){
            $('#yes,#no').hide();
            $('#start').text('Oh, okay then. Come back later!');
        });
    });

我只是想知道... 我怎么能给'战斗'和'离开'设置回调函数。如果你想知道为什么一开始就有这些变量，那只是图像和字符。

Answer 1

你不能为所有的按钮设置一个 click 处理程序，而这个元素并不存在。你应该做的是在一个不存在的元素上使用 .on 来绑定树上的一个元素。就像这样。

$("#someparentelement").on("click", "#yes", function() {
    // your code
});

Answer 2

你用的是哪个版本的jQuery？在这种情况下，你可能应该使用jQuery.on()，因为你的点击处理程序代码可能会在DOM中的按钮实际可用之前被执行。

$("#button").on("click", "#yes", function (event) {
    // Your yes-button logic comes here.
});

关于更多的细节和可能性，请阅读 .on(events [, selector ] [, data ], handler(eventObject)) 中的方法 jQuery文档:

如果选择器被省略或为空，事件处理程序被称为直接或直接绑定。每当事件发生在所选元素上时，不管是直接发生在元素上还是从下级（内部）元素冒出的气泡，都会调用该处理程序。

当提供选择器时，事件处理程序被称为委托。jQuery将事件从事件目标冒泡到处理程序所在的元素（即最内层到最外层的元素），并沿该路径为任何匹配选择器的元素运行处理程序。

在这种情况下，你想 delegate 事件，因为当你绑定该事件时，你的元素还没有在DOM中可用。

Answer 3

不要使用 click()，使用 on('click') 并将其附加到文档中。

以这种方式创建处理程序，将确保任何新元素都能触发该事件。

Answer 4

$('fight')选择的是fight标签，而不是带有fight id的标签。尝试使用$('#fight')代替。