jquery触发按钮点击，获取动态值select/option

Question

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

编辑：更新代码

<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() 函数来跟踪正在发生的事情，我认为生成的代码已执行 after 我模拟按钮点击。

详情：我有 3 个 < select > 列表。第一个包含年份文件夹，第二个：周文件夹，第三个：文件名。一开始我正在加载 'year' 文件夹，然后就像链式反应：每个 < select > 的 onChange() 函数正在为下一个 < select >

加载数据

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

Answer 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'
});

工作fiddle：http://jsfiddle.net/xwcnvvar/

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

Answer 2

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

的 complete 回调中

jquery触发按钮点击，获取动态值select/option

jquery trigger button click, and get value of dynamic select/option

jquery

select

dynamic

click

button

工作fiddle：http://jsfiddle.net/xwcnvvar/