脚本不会调用谷歌浏览器中的函数


Script wont call function in Google Chrome

我有一个脚本,当单击锚标签时会弹出一个div元素

echo '<a href="javascript:void(0);" onclick="popup(''yme-property-pop''); loadproperties(''open'', '''.$row['id'].''');"><h2>' . $row['placename'] . '</h2></a>';

它从 PHP 脚本中回显出来,在 FF 和 IE(9( 中运行良好。但是 chrome 不会运行它,至少在版本 18.0.1025.168 m

弹出窗口(分割(;当我单击它时,事件会触发,但它确实完成了函数所在脚本中的函数调用。

            var width_ratio = 0.4; // If width of the element is 80%, this should be 0.2 so that the element can be centered
    function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
                    alert(popUpDivVar);
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=0;
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2;
        window_width = window_width * width_ratio; 
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
                    alert(windowname); // THIS WORKS
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
    }   

该脚本中的最后一个函数是第一个调用的函数。我在里面放了一个警报框,以验证它是否被触发。但是,我在它调用的下一个函数中放置了一个警报框 (blanket_size(,它没有触发,因为我在函数的第一行有警报框。它没有开火。

我根本不知道为什么。奇怪的是,这些东西可以在其他浏览器中使用,但不能在chrome中使用。有什么想法吗?

谢谢!

编辑:我还验证了传递给 popup(( 函数("窗口名称"参数(的参数值是否有效/具有值。它包含 HTML 文档中的 DIV 的 ID,并且不是动态创建的。

编辑 2:好的,当我将带有参数值(窗口名称(的警报框添加到弹出窗口(窗口名称(函数时,我才运行脚本。但是如果我移除那个盒子,它会再次停止工作。

编辑3:调试器上根本没有错误。但现在我更加困惑了。经过大量尝试,它似乎正在随机处理警报框!有时有效,有时无效。

最终编辑将逻辑更改为 jQuery。早就应该这样做了!

    // Open property
$(".property-open-link", ".yme-propertyitem").live('click', function() { 
    $("#yme-property-pop").css({'display': 'block', 'z-index': '9999' });
    $("#blanket").css({'display': 'block', 'height', getBlanketHeight(), 'z-index': '1000' });
    loadproperties('open', $(this).closest(".yme-propertyitem").attr("id"));
});
// Close property button
$("#yme-property-close").live('click', function() { 
    $("#yme-property-pop").css('display', 'none');
    $("#blanket").css('display', 'none');
});

首先要澄清的几件事:

  1. 如果您为我们创建一种与您的互动方式,这真的很有帮助代码,尤其是当您在此处粘贴PHP代码而不是普通代码时.HTML

  2. 是否有理由不使用库来处理您的 DOM 相互 作用?它将使您的代码更加简洁并带走一些 跨浏览器代码时可能存在的故障点。

我有点不确定为什么你的代码在 Chrome 中不起作用。我在 jsfiddle 中设置了一个演示,它似乎工作正常。

您会注意到我没有将onclick属性中的事件附加到 <a/> 元素上,您也不应该这样做。这可能是问题所在。

目前,jsfiddle 中的代码会按预期发出警报,并且仅在切换中找不到相关 DOM 节点时才失败。

注意:

示例中addEventListener不是跨浏览器的,这是使用 DOM 库的另一个原因。