Question

我试图获得动态生成的“价值”＆lt;选项＆gt;单击按钮时，当我按下按钮时，工作但是当我打电话时：$（“＃view”）。触发器（'click'）;我得到的只是未定义

编辑：更新了代码

<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 /＆amp; files = 1

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

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

编辑：我已经放置了许多console.log（）函数来跟踪正在发生的事情，并且我已经想到了生成＆lt;选项＆gt;执行后我模拟按钮点击。

详情：我有3＆lt;选择＆gt;名单。第一个包含年份文件夹，第二个包含周文件夹，第三个包含文件名在开始时我正在加载'year'文件夹，然后它就像链式重启：onChange（）函数的每个＆lt;选择＆gt;正在加载下一个＆lt;选择＆gt;

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

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

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

Answer 2

我解决了我的问题，我不得不把viewButton.trigger（＆＃39;点击＆＃39;）;在完整回调$ .ajax

点击jquery触发器按钮，获取动态选择/选项的值

2 个答案:

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