如何在jQuery中触发事件？

Question

我有这个由 JS-Class 生成的 Select-field：

  new select({
                label : "mylabel",                    
                name  : "vermiet",
                values: {
                    "0": "nein",
                    "1"  : "1ver",
                    "2"  : "2ver",
                    "3"  : "3ver"                       
                },
                value: '0',
                events  : {
                    change: {
                        0 : {
                            hide: ['OB1','OB2','OB3'],
                            custom: function () {
                                jQuery('#OB1, #OB2, #OB3).val('');
                            }
                        },
                        1 : {
                            hide: ['OB2','OB3'],
                            show: ['OB1'],
                            custom: function () {
                                jQuery('#OB2, #OB3).val('');
                            }
                        },
                        2 : {
                            hide: ['OB3'],
                            show: ['OB1','OB2'],
                            custom: function () {
                                jQuery('#OB3).val('');
                            }
                        },
                        3 : {                               
                            show: ['OB1','OB2','OB3'],
                            custom: function () {

                            }
                        }  

                    }
                }
            }),
            new input({
                label   : "WE 1",
                name    : "OB1",
            }),
            new input({
                label   : "WE 2",
                name    : "OB2",
            }),
            new input({
                label   : "WE 3",
                name    : "OB3",
            })

当这个选择被改变时，它会显示/隐藏 OB1-OB3

现在我想从我网站上的其他元素触发此更改事件。我已经用 HTML-Divs & JS 构建了一个更好看的选择字段，所以我将 display:none; 设置为原始选择。当我现在更改新的 HTML-Div-Select 时，我无法从原来的 Select 运行中获取更改事件。

更改 original-select 的值是没有问题的，但是无论我尝试什么，原来的 change-event 都不会运行。

我已经尝试过trigger() 和triggerHandler()：/

谁能告诉我我还能尝试什么？

Answer 1

触发器必须工作。可能你错过了什么。这是一个简单的小提琴。希望这可以帮助。 -> https://jsfiddle.net/vxcogk9k/

PS：您是否将事件附加到 $(document) ？如果没有，并且在文档准备好之后出现了一些东西，它可能永远不会触发。

问候。

代码

HTML

<select id="originalHiddenSelect" style="display:none;">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

<ul id="fakeVisibleSelect">
<li data-value="1">ONE</li>
<li data-value="2">TWO</li>
<li data-value="3">THREE</li>
</ul>
<div id="selectionResult"><p>YOUR SELECTION RESULT: <strong><span>NONE</span></strong></p></div>

JS

obj = {
    init: function()
  {
    // behaviour on hidden select
    $(document).on('change.originalHiddenSelect', '#originalHiddenSelect', function(e){
        $('#selectionResult').find('span').text($(this).val());
      return;
    });

    // behaviour on "fake select"
    $(document).on('click.fakeVisibleSelect','#fakeVisibleSelect li', function(e){
        var valueToSelectOnHiddenSelect = $(this).attr("data-value");
      $('#originalHiddenSelect').val(valueToSelectOnHiddenSelect).trigger("change.originalHiddenSelect");
      return;
    });
  }
}

$(document).ready(function(){
    obj.init();
})

注意如果它解决了您的问题，请记住将答案签署为已接受。谢谢。