如何在jquery中将事件作为回调方法传递

Question

我无法解决有关jQuery的问题。

一些背景知识：我正在一个项目中，我使用代表问题的Json文件。 Json的简化版本如下：

{
"questionOne": {
    "id": "questionOne",

    "options": {
        "0": "First option",
        "1": "Second option"
    },
    "answers": {
        "0": "Answer for first option",
        "1": "Answer for second option"
    },

    "alerts": {
        "0": "danger",
        "1": "success"
    },
    "type": "select",
    "correctAnswer": 2
},

"questionTwo": {
    "id": "questionTwo",

    "options": {
        "0": "First option",
        "1": "Second option"
    },
    "answers": {
        "0": "Answer for first option",
        "1": "Answer for second option"
    },

    "alerts": {
        "0": "danger",
        "1": "success"
    },
    "type": "checkBox",
    "correctAnswer": [2, 3]
}

现在，在一个单独的javascript文件中，我使用$.getJSON方法调用Json，如下所示（ #questionOne是一个HTML ID，我想在其中插入Json内容， "millionaire"是Json文件的名称）：

$('#questionOne').ready(function () {
        GetQuestionFromJson("millionaire", "questionOne");
        alert("questions loaded");
    });

"GetQuestionFromJson"成功将正确的问题加载到#questionOne div中，并在问题div之后的#questionOne div中创建一个ID为“ questionOneButton"的按钮。 到这里为止一切正常。

我似乎无法获得"$('#questionOneButton').click"事件的作用：

//end of "questionOneReady" function
$('#questionOneButton').click(function () {
            alert("button clicked");
        });

我尝试了不同的解决方案以使其正常工作，但还没有解决方案。 我很确定这与以异步方式调用的函数有关，并且在$('#questionOne').ready有机会创建之前创建了"$('#questionOneButton').click"具有'#questionOneButton' ID的div。

问题：

1. 我对么？
2. 我该如何克服？

对我来说，保持文件分开很重要。 这可能吗？ 我有什么选择？

Answer 1

成功创建$ .getJSON元素后，定义事件。

var jqxhr = $.getJSON( "example.json", function() {
  //do stuff with data
  //create html elements
  //append onclick event
});

该答案假设您使用的是jquery 1.5，否则我建议您进一步阅读$ .getJSON的文档。

Answer 2

这取决于您将内容添加到站点并设置事件处理程序的顺序。 您只能将事件处理程序设置为现有元素。

处理此类设置的最佳方法是将处理程序绑定到document元素，并且仅在目标匹配时做出反应。 在jQuery中，它看起来像以下示例：

jQuery( document ).on( 'click', '#questionOneButton', function () {
    alert( "button clicked" );
} );

这样，事件处理程序已经存在，您可以稍后添加目标元素。

有关详细说明，请参见http://api.jquery.com/on/#direct-and-delegated-events 。

Answer 3

当您尝试绑定事件处理程序时元素不存在时，可以使用event delegation并绑定到永远存在的永久资产。

$(document).on('click', '#questionOneButton',function () {
     alert("button clicked");
});

否则，一旦将事件处理程序插入到ajax回调中的DOM中，就将事件处理程序绑定到这些元素

Answer 4

根据我对您的情况的观察，

似乎在$ .getJSON调用之后创建了questionOneButton，它构造了所需的UI。

请在$ .getJSON完成后附加点击处理程序。 这将确保在DOM中的元素可用后附加事件处理程序。

$.getJSON("url",function(data)
 {
     //attach click handler here
 })

请参考jQuery getJSON

Answer 5

您的诊断听起来很可能。

如果你不能做这样的事情

$('#questionOne').ready(function () {
    GetQuestionFromJson("millionaire", "questionOne");
    alert("questions loaded");

    $('#questionOneButton').click(function () {
        alert("button clicked");
    });

});

您可以尝试在回调到$（'＃questionOne'）。ready的结尾处触发一个自定义事件，然后侦听该事件作为将事件处理程序附加到按钮的提示。

$('#questionOne').ready(function () {
    GetQuestionFromJson("millionaire", "questionOne");
    alert("questions loaded");

    $(document).trigger('my.event');

});

$(document).on('my.event',function(event){
    $('#questionOneButton').click(function () {
        alert("button clicked");
    });
});