Question

使用原型我正在收听几个复选框上的点击事件。在复选框上单击我要禁用所有<select>元素。我正在使用原型。所以，我有这个代码：


$$('.silhouette-items input[type="checkbox"]').invoke('observe', 'click', function(event) {
            var liItem = this.up('li.item');      
            if(this.checked) {
                alert('checked');
                liItem.removeClassName('inactive');
                var selectItem = liItem.select('select');
                for(i=0;i<selectItem.length;i++) {
                    selectItem[i].disabled=false;   
                    if (selectItem[i].hasClassName('super-attribute-select')) {
                        selectItem[i].addClassName('required-entry');
                    }
                }
            } else {
                alert('unchecked');
                liItem.addClassName('inactive');
                var selectItem = liItem.select('select');
                for(i=0;i<selectItem.length;i++){
                    selectItem[i].disabled=true;
                    if (selectItem[i].hasClassName('super-attribute-select')) {
                        selectItem[i].removeClassName('required-entry');
                    }
                }
            }
            calculatePrice();
        });

当我手动点击复选框时，一切似乎都没问题。所有元素都按需要禁用。但是，我还有这个按钮，它在点击事件中触发一个函数，它触发该复选框上的点击事件。

在Opera浏览器中它可以工作。在其他人，不是。这就像Opera首先（un）检查然后执行事件。 Firefox首先触发事件，然后（取消）检查元素。

我不知道如何解决它。

HTML：


<ul class="silhouette-items">
  <li>
    <input type="checkbox" checked="checked" id="include-item-17" class="include-item"/>
    <select name="super_attribute[17][147]">(...)</select>
    <select name="super_group[17]">(...)</select>
    <button type="button" title="button" onclick="addToCart(this, 17)">Add to cart</button>
  </li>
  <!-- Repeat li few time with another id -->
</ul>

另一个JS：


addToCart = function(button, productId) {
            inactivateItems(productId);
            productAddToCartForm.submit(button);
        }
inactivateItems = function(productId) {
             $$('.include-item').each(function(element) {
                var itemId = element.id.replace(/[a-z-]*/, '');
                if (itemId != productId && element.checked) {
                    simulateClickOnElement(element);
                }
                if (itemId == productId && !element.checked) {
                    simulateClickOnElement(element);
                }
            });
        }
simulateClickOnElement = function(linkElement) {
            fireEvent(linkElement, 'click');
        }

其中fireEvent是触发事件的Magento函数

Answer 1

如果你没有这样做，就不要费心去模拟onclick。拥有一个可以从外部在事件处理程序和中调用的单独函数应该适用于您的情况。

var handler = function(){
    //...
}
var nodeW = $('#node');
handler.call(nodeW);

当然，这并不会触发可能存在的所有onclick处理程序，但它更简单，所以它应该可以正常工作。使用.call调用函数的注意事项：

无论您传递的是什么，因为第一个参数用作调用中的this。我不记得JQuery究竟设置了this，但你应该尝试传递相同的东西以保持一致。
其他参数成为函数的实际参数。在我的例子中，我没有传递任何东西，因为我们实际上并没有使用事件对象，而且因为我不知道如何模拟JQuery如何创建该对象。

Answer 2

替换

fireEvent(linkElement, 'click');

与

linkElement.click();

适用于firefox 5和safari 5.1，所以问题可能在于fireEvent（）方法。

JavaScript click具有与手动不同的行为

2 个答案: