javascript - 使用 jQuery 触发原型(prototype)更改事件

Question

我在 Prototype 方面没有那么多经验，我一直在使用 jQuery 来使 our site found here 上的东西正常工作。 .今天我添加了一个基于 jQuery 的 session 处理脚本。我遇到的问题是，尽管我今天在功能方面已经取得了进展，但我似乎无法通过 jQuery 触发更改事件。

我目前正在使用以下代码，但它无法正常工作(您可以在网站上对其进行测试..只要您使用鼠标更改年份，就会触发 AJAX 并可以选择 Make )...

var yearSelected = jQuery.jStorage.get("yearSelected");
console.log(yearSelected);

// Set the vars...

if ((jQuery("div.amfinder-horizontal td:nth-child(1) select").val() == "0")) {

    jQuery("div.amfinder-horizontal td:nth-child(1) select option").each(function() { this.selected = (this.text == "2003"); });

    jQuery("div.amfinder-horizontal td:nth-child(1) select").trigger('change');

    console.log('Set the year!');

}

下面的代码是控制它的原型(prototype)脚本，我需要触发更改事件，如果可能的话，我很乐意通过 jQuery 来完成。

var amFinder = new Class.create();

amFinder.prototype = {
    initialize: function(containerId, ajaxUrl, loadingText, isNeedLast, autoSubmit)
    {
        this.containerId = containerId;
        this.ajaxUrl     = ajaxUrl;
        this.autoSubmit  = Number(autoSubmit);
        this.loadingText = loadingText;
        this.isNeedLast  = Number(isNeedLast);
        this.selects     = new Array();

        //possible bug if select order in the HTML will be different
        $$('#' + this.containerId + ' select').each(function(select){
            select.observe('change', this.onChange.bindAsEventListener(this));
            this.selects[this.selects.length] = select;
        }.bind(this));
    },

    onChange: function(event)
    {
        var select     = Event.element(event);
        var parentId   = select.value;
        var dropdownId = 0;

        /* should load next element's options only if current is not the last one */
        for (var i = 0; i < this.selects.length; i++){
            if (this.selects[i].id == select.id && i != this.selects.length-1){
                var selectToReload = this.selects[i + 1];
                if (selectToReload){
                    dropdownId = selectToReload.id.substr(selectToReload.id.search('--') + 2);
                }
                break;
            }
        }

        this.clearAllBelow(select);

        if (0 != parentId && dropdownId){
            var postData = 'dropdown_id=' + dropdownId + '&parent_id=' + parentId;
            new Ajax.Request(this.ajaxUrl, {
                method: 'post',
                postBody : postData,
                evalJSON : 'force',

                onLoading: function(){
                    this.showLoading(selectToReload);
                }.bind(this),

                onSuccess: function(transport) {
                    if (transport.responseJSON){
                        this.clearSelectOptions(selectToReload);
                        var itemsFound = false;
                        transport.responseJSON.each(function(item){
                            itemsFound = true;
                            var option = document.createElement('option');
                            option.value = item.value;
                            option.text  = item.label;
                            option.label = item.label;
                            $(selectToReload).appendChild(option);
                        });

                        if (itemsFound){
                            $(selectToReload).disabled = false;
                        }
                    }
                }.bind(this)
            });
        }
    },

    isLast: function(select)
    {
        return (this.selects[this.selects.length-1].id == select.id);    
    },

    isFirst: function(select)
    {
        return (this.selects[0].id == select.id);         
    },

    clearSelectOptions: function(select)
    {
        $(select).descendants().each(function(option){
            option.remove();
        });
    },

    clearAllBelow: function(select)
    {
        var startClearing = false;
        for (var i = 0; i < this.selects.length; i++){
            if (startClearing){
                this.clearSelectOptions(this.selects[i]);
                $(this.selects[i]).disabled = true;
            }
            if (this.selects[i].id == select.id){
                startClearing = true;
            }
        }
        var type = (((this.isLast(select) && !this.isNeedLast) && select.value > 0) || ((this.isNeedLast) && ((select.value > 0) || (!this.isFirst(select))))) ? 'block' : 'none';

        if ('block' == type && this.autoSubmit && this.isLast(select))
        {
            $$('#' + this.containerId + ' .amfinder-buttons button')[0].form.submit();
        } else {
            $$('#' + this.containerId + ' .amfinder-buttons')[0].style.display = type;            
        }


    },

    showLoading: function(selectToReload)
    {
        var option = document.createElement('option');
        option.value = 0;
        option.text  = this.loadingText;
        option.label = this.loadingText;
        $(selectToReload).appendChild(option);        
    },
};

Answer 1

我遇到了同样的问题。这是解决方案。当你创建 : amfinder-horizo​​ntal 时，html 会变成这样

<div class="amfinder-horizontal" id="amfinder_5333ffb212b09Container">
   ...
</div>

看id元素:amfinder_5333ffb212b09容器，粗体部分也是amfinder对象的变量名(从原型(prototype)创建)。这是一个随机的名字。这是来自扩展源:

<?php $finderId = 'amfinder_' . uniqid(); ?>
...
<script type="text/javascript">
var <?php echo $finderId ?>  = new amFinder(
    '<?php echo $finderId ?>Container', 
    '<?php echo $this->getAjaxUrl() ?>', 
    '<?php echo $this->__('Loading...')?>',
    '<?php echo Mage::getStoreConfig('amfinder/general/partial_search')?>',
    <?php echo intval(Mage::getStoreConfig('amfinder/general/auto_submit')) ?>
);
</script>

因此在每次页面刷新时都有不同的名称。 var <?php echo $finderId ?>

步骤:

// Find the name for amfinder object.
var objName = jQuery("div.amfinder-horizontal").attr('id').replace('Container','');

// set Value to that select - copied from your code
jQuery("div.amfinder-horizontal td:nth-child(1) select option").each(function() { this.selected = (this.text == "2003"); });

// call the change event of that object
var targetObj = {
    target : jQuery("div.amfinder-horizontal td:nth-child(1) select")[0]
};
window[objName].onChange(targetObj);