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

时间:2016-07-08 03:36:36

标签: javascript jquery javascript-events

我在下面选择选择第二个表单,通过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()函数,并且没有看到data-path属性。

在console.log输出中,我们转到&#34; 1。来到这里&#34;,但不是&#34; 2。来到这里&#34;。

我尝试了很多东西,但无济于事。谁能发现这里到底发生了什么?

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

3 个答案:

答案 0 :(得分:0)

load操作完成

后,您必须尝试访问加载的html

您需要在&#34;完成&#34;中添加 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'));
                }
            });
        });
  });

答案 1 :(得分:0)

对于动态内容,您需要使用$('selector')。on(),如$(“#PostItemContainer”)。on(“click”,“。posttitem”,function(){.. 。});

答案 2 :(得分:0)

我认为这是因为你没有使用.load完整功能作为回调。您的代码在数据出现之前完成:

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