1

我需要一些关于回调的帮助。出于某种原因，它们不能很好地工作。
我正在用 jQuery 制作游戏。我有一个<div id='button'></div>用于游戏中的所有按钮。游戏将有两个按钮来执行操作，以及一个问题。问题由 a 控制<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!');
        });
    });

我只是想知道..如何将回调函数设置为“战斗”和“离开”。
如果您想知道为什么一开始会有所有这些变量，那只是图像和字符。

4

4 回答 4

3

您不能click在不存在的元素上设置处理程序。您应该做的是使用.on将元素绑定到树的上方。就像是：

$("#someparentelement").on("click", "#yes", function() {
    // your code
});
于 2013-02-04T01:54:29.863 回答
1

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

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

有关更多详细信息和可能性，请阅读jQuery 文档.on(events [, selector ] [, data ], handler(eventObject))中的方法：

如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时都会调用处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的冒泡。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），并为沿该路径匹配选择器的任何元素运行处理程序。

在这种情况下，您想要delegate该事件，因为当您绑定事件时，您的元素在 DOM 中尚不可用。

于 2013-02-04T01:54:12.657 回答
0

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

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

于 2013-02-04T01:54:11.380 回答
0

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

于 2013-02-04T01:56:22.980 回答