简体   繁体   中英

Chrome event registered with addEventListener not firing on 'click'

I developed a small web app using js. The app is working as expected in mozilla ff browser. On window load triggers an ajax request, which, on success alters the dom - includes a small select element and adds options to it, each of them getting an eventListener. Here are some relevant extracts:

var lst = null;
window.onload=init;
function init() {
$.ajax({
    data : {
        type : 'someType',
        sender : 'someSender'
    },
    beforeSend : function () {
    },
    success : function (response) {
        response = JSON.parse(response);
        if (response.links.constructor === Array) {
            dispNavList(document.getElementById("navProxy"), response.links);
            atch();
        }
        if (response.data.constructor === Array) {
            dispTable(document.getElementById("dataProxy"), response.data);
            if (response.data.length > 0) {
                setTimeout("refresh()", 1000);
            }
        }
    },
    complete : function () {
    }
});}
function dispNavList(proxy, v) {
if (lst != null) {
    dtch();
    lst = null;
}
proxy.innerHTML = null;
if (v.length > 0) {
    lst = document.createElement('select');
    var i = 0;
    while (i < v.length) {
        var opt = document.createElement('option');
        opt.setAttribute('value', v[i].ename);
        opt.appendChild(document.createTextNode(v[i].dscr));
        lst.appendChild(opt);
        i = i + 1;
    }
    proxy.appendChild(document.createElement("p").appendChild(document.createTextNode('Data fetched @:' + timenow())));
    proxy.appendChild(lst);
} else {
    proxy.appendChild(document.createElement("p").appendChild(document.createTextNode('Data fetch failed @:' + timenow())))
}}
function atch() {
if (lst != null) {
    var options = lst.querySelectorAll("option");
    if (options.length != "undefined") {
        [].forEach.call(options,
            function (e) {
                                console.log('inside');
            e.addEventListener('click', caller,false);//.bind(e), false);
        })
    }
}}
function caller(event) {
    console.log(event.target.nodeType);
    return;
/*var arr = {
    type : 'd',
    sender : this.getAttribute('value')
};
$.ajax({
    data : arr,
    beforeSend : function () {
        clearTimeout(aTout);
        aTout = null;
    },
    success : function (response) {
        clearTimeout(aTout);
        aTout = null;
        response = JSON.parse(response);
        if (response.links.constructor === Array) {
            dispNavList(document.getElementById("navProxy"), response.links);
            atch();
        }
        if (response.data.constructor === Array) {
            dispTable(document.getElementById("dataProxy"), response.data);
            //alert(response.data.length);
            if (response.data.length > 0) {
                setTimeout("refresh()", 1000);
            }
        }
    },
    complete : function () {
        }
    }
});*/}

dtch() function is the reverse of atch() removing the eventlisteners. There are some comments there because i tried first of all to bind this object to the option (in function atch()) and it successfully does so while caller function didn't have at first an argument (event - i've tried this following examples from online books), it just recognized this object appropriately (in ffox). The problem is that caller() isn't invoked on click despite the fact that the eventListener is properly attached (checked it in developer tools). If something's missing (code, other info etc.) please ask and i'll provide them. Also please ignore other commented code, the app is under construction and i'm trying various things. Even if there are small syntax errors i guarantee that i have a working code for ffox.

Sorry for posting a duplicate question. You can get the answer @ addEventListener working in firefox but not in chrome . So alter the event type to 'change' on the select element and get option selected through

selectElement.options[selectElement.selectedIndex].value

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM