为什么这不想在动态内容上找到选择器？

Question

我有下面的 select 选择第二种形式通过 load() 进入 #formContent div 工作正常。

<form id="selectform">
    <select id="selector" class="form-control" name="selector">
        <option value="" selected="selected">Choose your Poison</option>
        <option value="website">Website</option>
    </select>
</form>
<div id="formContent"> </div>

被拉入的表格是：

<form id="website">
    <div class="control-group form-group">
        <label for="name">Name:</label>
        <input name="name" type="text" data-path="name">
    </div>
</form>

一旦加载，第二种形式的任何输入都应该通过 keyup 附加一个监听器，这似乎也很好。

在 keyup 上，我们确实进入了 keyup 函数，但是我们没有通过 $input.each() 函数，也没有看到数据路径属性。

在 console.log 输出中，我们得到“1. got here”，而不是“2. got here”。

我试了很多东西，都无济于事。谁能看出这里到底发生了什么？

jQuery正在使用的是1.11.3

var mySelector, days = [];
$('#selector').on('change', function() {
    var theType = $(this).val();
    if(theType != ''){
        $('#formContent').load('forms/' + theType + '.html');
        var mySelector = '#' + theType;
        var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
        $(document).on('keyup', $input, function() {
            // WE GET THIS FAR
            console.log('1. got here.');
            element = {};
            $input.each(function(e) {
                console.log('2. got here.');
                if ($(this).data('path')) {
                    console.log('3. got here. ' + $(this).data('path'));
                }
            });
        });
    }
});

Answer 1

您必须尝试访问 加载的 html 在之后 load 操作是完成

您需要在 "complete" 回调 中添加此 html。就像 api 参考。 http://api.jquery.com/load/

$('#formContent').load('forms/' + theType + '.html',function() {

// callback here will make sure the load is complete. 
});

一小段代码。

$('#formContent').load('forms/' + theType + '.html',function() {
        var mySelector = '#' + theType;
        var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
        $(document).on('keyup', $input, function() {
            // WE GET THIS FAR
            console.log('1. got here.');
            element = {};
            $input.each(function(e) {
                console.log('2. got here.');
                if ($(this).data('path')) {
                    console.log('3. got here. ' + $(this).data('path'));
                }
            });
        });
  });

Answer 2

对于动态内容，您需要使用 $('selector').on()，如 $("#PostItemContainer").on("click", ".postitem",函数() {...});

Answer 3

我认为这是因为您没有使用 .load complete 函数作为回调。您的代码在数据出现之前完成：

var mySelector, days = [];
$('#selector').on('change', function() {
    var theType = $(this).val();
    if(theType != ''){
        $('#formContent').load('forms/' + theType + '.html', function ( data ) { //data will be the response once completed. This is only needed if you need to do something with the response data
        var mySelector = '#' + theType;
        var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
        $(document).on('keyup', $input, function() {
            // WE GET THIS FAR
            console.log('1. got here.');
            element = {};
            $input.each(function(e) {
                console.log('2. got here.');
                if ($(this).data('path')) {
                    console.log('3. got here. ' + $(this).data('path'));
                }
            });
        });
      });
    }
});

为什么这不想在动态内容上找到选择器？

Why does this not want to find the selector on dynamic content?

javascript

jquery

jquery-events