尝试将 onClick 事件创建/绑定到通过 dojo.xhrGet 请求生成的 <option>

Question

我正在尝试制作一段道场代码，但遇到了一些困难。 其背后的意图是这样的：

1- 让 select 触发 onChange 事件，该事件通过 dojo.xhrGet 检索选项列表。 2- 让每个检索到的选项都有自己的 onclick 事件关联/绑定到它，并且它触发的函数需要 2 个参数

问题：此时，选项上的 onClick 事件会在通过 Ajax 检索到且未传递第一个参数时立即触发。之后事件停止触发（单击不会产生任何结果）。

提前感谢您的反馈。代码如下

JS

function checkAvailable(i){
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+i;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxCoreo.php",
        handleAs:"text",
        content: {
            programa: prog,
            item: i
        }, 
        load: function(data){
            var targetNode = dojo.byId(id_coreo);
            dojo.place(data,targetNode,"only");
            dojo.byId(id_coreo).disabled = false;
            var callback = function(evt){
                var j = evt.target.innerHTML;

                checkPack(j,i);
                console.log('write me if you fire inside first function');
            };
            dojo.query("#coreografia_1>option").connect('click', callback);
            setValor(i);
        }

    });

}



    function checkPack(j,i){
    console.log('write me if you fire inside second function');
    console.log(j);
    console.log(i);

    var num = j;
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+j;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxPack.php",
        handleAs:"text",
        content: {
            programa: prog,
            coreo: j
        },
        load: function(data){

            if(data=="true"){
                dojo.query("option[value="+num+"]").forEach(dojo.destroy);
                alert('O Pack escolhido já foi encomendado previamente.');
                setValor(i);
            }

        }

    });

}

HTML

<select name="programa[]" id="programa_1" onChange="checkAvailable(1)" title="obrigatorio">
                <option value="0">Choose your program</option> 

</select>
 <select name="coreografia_1" id="coreografia_1" disabled="disabled" title="obrigatorio">
                <option value="0" selected="selected">Escolha Um Programa</option> //this is the node that is populated by the first xhrGet call
            </select>

编辑：我已经编辑了代码以反映对它的更改并添加了 html

Answer 1

通过检查您的代码，我可以在函数 checkAvailable 中看到，在您连接到 onclick 事件的行中，而不是将函数作为 回调传递你在调用它。

dojo.connect(opt,'onclick', checkPack(opt.target.innerHTML,i));

你应该这样做：

var callback = function(){
    checkPack(opt.target.innerHTML,i);
};
dojo.connect(opt,'onclick', callback);

Answer 2

根据我的经验，如果您花费超过 1 天的时间尝试跟踪跨浏览器问题，那么它可能与您的基本 html 知识或基本 Js 概念有关。

这与只有 FF 管理直接附加到选项标签的 onclick 事件这一事实有关。对于其他人，您需要将 onchange 附加到父级。

所以这是工作代码的最终版本，以防万一有人遇到类似问题

function checkAvailable(i){
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+i;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxCoreo.php",
        handleAs:"text",
        content: {
            programa: prog,
            item: i
        }, 
        load: function(data){
            var targetNode = dojo.byId(id_coreo);
            dojo.place(data,targetNode,"only");
            dojo.byId(id_coreo).disabled = false;
            var callback = function(evt){
                var j = evt.target.value;
                checkPack(j,i);
            };
            dojo.query("#coreografia_"+i).connect('onchange', callback);
            setValor(i);
        }

    });

}



    function checkPack(j,i){
    console.log('write me if you fire inside second function');
    console.log(j);
    console.log(i);

    var num = j;
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+j;

    var prog = dojo.byId(id_prog).value;

    //Confirma Se não há encomendas previas deste pack (um máximo de 2 anteriores)

    dojo.xhrGet({
        url:"ajaxPack.php",
        handleAs:"text",
        content: {
            programa: prog,
            coreo: j
        },
        load: function(data){

            if(data=="true"){
                dojo.query("#coreografia_"+i+" option[value="+num+"]").forEach(dojo.destroy);
                alert('O Pack escolhido já foi encomendado previamente.');

            }

        }

    });
}