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内容，{{ 1}}是Json文件的名称）：

"millionaire"

$('#questionOne').ready(function () { GetQuestionFromJson("millionaire", "questionOne"); alert("questions loaded"); });成功将正确的问题加载到"GetQuestionFromJson" div中，并在问题div后面的单独div中创建一个ID为＃34; #questionOne的按钮。到这里一切正常。

我似乎无法让questionOneButton"事件发挥作用：

"$('#questionOneButton').click"

我尝试了不同的解决方案，但是还没有解决方案。我非常确定这与以异步方式调用的函数有关，并且//end of "questionOneReady" function $('#questionOneButton').click(function () { alert("button clicked"); });在"$('#questionOneButton').click"有机会使用{{1}创建div之前创建$('#questionOne').ready } id。

问题：

我说错了吗？
我怎样才能克服这个？

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

Answer 1

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

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

这个答案假定您使用的是jquery 1.5，否则我建议您进一步阅读the doc for $.getJSON.

Answer 2

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

处理此类设置的最佳方法是将处理程序绑定到文档元素，并仅在目标匹配时作出反应。在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");
    });

});

您可以尝试在回调结束时触发自定义事件$（＆＃39;＃questionOne＆＃39;）。准备就绪，并将该事件视为将事件处理程序附加到按钮的提示。< / p>

$('#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");
    });
});

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

5 个答案: