显示/隐藏只工作在Chrome (jQuery)

这个问题以前已经问过了，在不同的上下文中(适用于Firefox，而不是Chrome)。

我的显示/隐藏功能在Firefox中不工作，但它们在Chrome中工作得很好。从技术上讲，它在Firefox中工作一次，然后它将无法再次工作，直到我刷新页面。同样，在Chrome和Internet Explorer中也可以正常工作。

jQuery v1.11.1
Firefox v40.0.3
Chrome v45.0.2454.93

****更新:****我解决了这个问题:我用以下代码替换了"jQuery"下的代码。

/* Show Product Overlay */
function enlargeProduct() {
    $('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}
function closeProductOverlay() {
    /* Hide Product Overlay */
    $(document).on('click', function (event) {
        if (!$(event.target).closest('#clickControl').length) {
            $('#productOverlay').hide();
        }
    });
}

jQuery -旧代码不能工作:

function enlargeProduct() {
/* Show Hidden Div Overlay */
$('#productOverlay').show();
};
function closeProductOverlay() {
/* Hide Product Overlay */
$(document).on('click', function (event) {
    if (!$(event.target).closest('#clickControl').length) {
        $('#productOverlay').hide();
    }
});
}

HTML显示/隐藏

    <!-- Product Overlay -->
    <div id="productOverlay" onclick="closeProductOverlay()">
        <div id="mobiPadding">
            <div id="productContainer">
                <div id="clickControl">
                    <input type="number" onchange="addQuantity()" value="1" min="1" max="99" />
                    <input type="button" class="btn btn-primary" onclick="addToCart()" value="Add to Cart" />
                </div>
            </div>
        </div>
    </div>

HTML控件-这是我填充HTML

<div class="item-container container">
</div>

Javascript填充HTML控件

var item = document.getElementsByClassName("item-container")[0];
var items = json.items;
for (var i = 0; i < items.length; i++) {
/* Outermost Div - For Bootstrap Formatting */
var div = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "col-md-3";
div.setAttributeNode(divClass);
item.appendChild(div);
/* Center Div - For adding Padding to each box */
var div2 = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "itemDiv";
div2.setAttributeNode(divClass);
div.appendChild(div2);
/* Innermost Div - For Adding Hover Effects (Not visible, functionality only) */
var hoverDiv = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "hoverDiv";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseover");
divClass.value = "onMouseOver(" + i + ")";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseout");
divClass.value = "onMouseOut(" + i + ")";
hoverDiv.setAttributeNode(divClass);

/* Add new ID iteration to identify selected product for button toggle */
var divId = document.createAttribute("id");
divId.value = "btn" + i;
hoverDiv.setAttributeNode(divId);
div2.appendChild(hoverDiv);
/* Add clearfix to clear formatting after each fourth iteration */
if (i >= 0) {
    var j = i - 3;
    if (j % 4 == 0) {
        var clearfix = document.createElement("div");
        var fixClass = document.createAttribute("class");
        fixClass.value = "clearfix";
        clearfix.setAttributeNode(fixClass);
        item.appendChild(clearfix);
    }
}
/* Title */
var h2 = document.createElement("h4");
h2.innerHTML = items[i].title.text;
hoverDiv.appendChild(h2);
    /* Class */
    var titleClass = document.createAttribute('class');
    titleClass.value = "titleClass";
    h2.setAttributeNode(titleClass);
/* Image */
var img = document.createElement("img");
var src = document.createAttribute('src');
src.value = items[i].image.text;
img.setAttributeNode(src);
hoverDiv.appendChild(img);
    /* Class */
    var imageClass = document.createAttribute('class');
    imageClass.value = "imageClass";
    img.setAttributeNode(imageClass);
/* Description */
var p = document.createElement("p");
p.innerHTML = items[i].description.text;
hoverDiv.appendChild(p);
    /* Class */
    var descClass = document.createAttribute('class');
    descClass.value = "descriptionClass";
    p.setAttributeNode(descClass);

/* Price */
var price = document.createElement("p");
price.innerHTML = items[i].price.text;
hoverDiv.appendChild(price);
    /* Class */
    var priceClass = document.createAttribute('class');
    priceClass.value = "priceClass";
    price.setAttributeNode(priceClass);
/* Hidden Click to Enlarge Product Button - Show/Hide on Hover*/
    var productButton = document.createElement("div");
    productButton.innerHTML = '<input id="productBtn' + i + '" onclick="enlargeProduct()" class="productBtn btn btn-primary" value="Click to Enlarge"/>';
    hoverDiv.appendChild(productButton);
};
/* DOM Event Listeners - Handle Mouse Over/Out to Toggle Button and Product Overlays */
function onMouseOver(i) {
    $('#productBtn' + i).show();
}
function onMouseOut(i) {
    $('#productBtn' + i).hide();
}

我用JSON填充项目数组。这也有必要包括吗?基本上它们是这样设置的:

var json = {
    "items": [
  {
      "title": { "text": "#PART0001" },
      "image": { "text": "../items/sale-october/PART0001.jpg" },
      "description": { "text": "Item Description" },
      "price": { "text": "$99.99" }
  }
    ]
};

我特别困惑，因为我在我的网站的另一部分(显示/隐藏注册表单)使用了这种确切的方法，而且效果很好。我哪里做错了?div =/

/* Show Product Overlay */
function enlargeProduct() {
    $('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}
function closeProductOverlay() {
    /* Hide Product Overlay */
    $(document).on('click', function (event) {
        if (!$(event.target).closest('#clickControl').length) {
            $('#productOverlay').hide();
        }
    });
}