jquery触发按钮单击，并获取动态选择/选项的值答案

【问题标题】：jquery trigger button click, and get value of dynamic select/optionjquery触发按钮单击，并获取动态选择/选项的值
【发布时间】：2015-12-19 20:21:42
【问题描述】：

我试图在按钮单击时获取动态生成的

编辑：更新代码

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
</script>
</head>

<body>

<script>
    $(document).ready(function() {
        var placeholder = $("#test");

        var yearList = $("<select />", {'class': 'form-sth', 'id': 'year-list'});
        var weekList = $("<select />", {'class': 'form-sth', 'id': 'week-list'});
        var fileList = $("<select />", {'class': 'form-sth', 'id': 'file-list'});

        var viewButton = $("<button />", {'class': 'btn btn-default', 'id': 'view', 'text': 'view'});

        function populate(list, base_dir, prefix, postfix, bFiles) {
            $.ajax({
                url: 'stat.php',
                type: 'GET',
                data: { dir: base_dir, files: (bFiles == true) ? '1' : '0' },
                dataType: 'json',
                success: function(json) {                   
                    json.content.forEach(function(entry) {
                        var option = $("<option />", {'value': prefix + entry + postfix, 'text': entry} );

                        list.append(option);
                    });

                    var lastOption = list.children('option:last-child');

                    lastOption.attr('selected', 'selected');
                    lastOption.trigger('change');
                }
            })
        }

        var baseDir = '/var/www/_cronjob/data/ups-stats/';

        populate(yearList, baseDir, '', '/', false);

        yearList.on('change', function() {
            console.log('#year-list : onChange()');

            var selectedOption = $('#year-list option:selected');

            populate(weekList, baseDir + selectedOption.attr('value'), selectedOption.attr('value'), '/', false);
        })

        weekList.on('change', function() {
            console.log('#week-list : onChange()');

            var selectedOption = $('#week-list option:selected');

            populate(fileList, baseDir + selectedOption.attr('value'), selectedOption.attr('value'), '', true);
        })

        var delay = 1500;

        yearList.appendTo(placeholder).hide().fadeIn(delay);
        weekList.appendTo(placeholder).hide().fadeIn(delay);
        fileList.appendTo(placeholder).hide().fadeIn(delay);
        viewButton.appendTo(placeholder).hide().fadeIn(delay);

        viewButton.on('click', function() {
            console.log('#view : onClick()');
            var option = $('#file-list option:selected');

            console.log(baseDir + option.attr('value'));
        })

        console.log('button click! ...');
        $("#view").trigger("click");
    });

</script>

<div id="test">
</div>

</body>

</html>

stat.php?dir=/var/www/&files=1 的示例输出

{"content":["index.php","test.php"]}

我不明白这一点，谁能解释一下为什么会发生这种情况以及如何解决这个问题？

编辑：我已经放置了许多 console.log() 函数来跟踪正在发生的事情，并且我发现生成的代码是在之后执行的模拟按钮点击。

详情：我有 3 个列表。第一个包含年份文件夹，第二个：周文件夹，第三个：文件名。一开始我正在加载“年份”文件夹，然后它类似于链反应：每个的 onChange() 函数正在加载下一个

的数据

http://i.stack.imgur.com/rlUwY.png

【问题讨论】：

你试过“viewButton.click().trigger()”
viewButton.click().trigger(); - 未捕获的类型错误：无法将 undefined 或 null 转换为对象

标签： jquery select button dynamic click

【解决方案1】：

工作代码：

$(function(){
 var placeholder = $("#test");

 var fileList = $("<select />", {'id': 'file-list'});
 var viewButton = $("<button />", {'id': 'view', 'text': 'view'});

 // ... here is the code that generates <options> ...

 var delay = 1500;
 fileList.html('<option value="1">Uno</option><option value="2">Dos</option>');
 fileList.appendTo(placeholder).hide().fadeIn(delay);
 viewButton.appendTo(placeholder).hide().fadeIn(delay);

 viewButton.on('click', function() {
   var option = $('#file-list option:selected').text();

   console.log(option);
 })

 viewButton.trigger('click');  // here i get 'undefined'
});

工作小提琴：http://jsfiddle.net/xwcnvvar/

PS：生成DOM时需要包含你的代码；如果您不这样做，当您尝试将函数绑定到不存在的元素时，您会收到类似undefined 的错误。在你的情况下，你有 select 元素，但你没有选择，所以没有选择（这就是为什么我在你的代码上添加两个选项）干杯:)

【讨论】：

只是指出，这里的关键是options 正在设置select。如果没有选项，那么记录到控制台的值将是未定义的（因为没有选项可供选择）。
@Braffin，正是……我错过了我的解释中的那一部分……这就是为什么我在select上添加两个选项
是动态生成的，但代码是在模拟按钮按下后执行的，有没有办法在脚本末尾强制单击按钮？
您能否包含代码中缺少的部分（您在哪里动态生成选项？）

【解决方案2】：

我解决了我的问题，我不得不把 viewButton.trigger('click');在 $.ajax 的 complete 回调中

【讨论】：