Question

这是我的js代码

var dd = $('#ulscroller > li:last-child').attr('id');
    var to_int_dd = parseInt(dd)+1;
    var input_id = $('#'+dd+' > input:first-child').attr('id');
    var to_int_input_id = parseInt(input_id)+1;
    var del_id = parseInt(input_id)-40000;
    var to_int_del_id = parseInt(del_id)+1;
    var html_input = '';
    $('#'+input_id).keypress('keypress', function(event) {
        var keyCode = (event.keyCode ? event.keyCode : event.which);
        if (keyCode == 13) {
            html_input = '<li id="'+to_int_dd+'"><input type="text" class="search-list-input" id="'+to_int_input_id+'" name="'+to_int_input_id+'" style="width:180px;"><span style="cursor:pointer;" id="'+to_int_del_id+'" onClick="clearInput(this)">×</span></li>';
            $('#ulscroller').append(html_input);
            $('#'+to_int_input_id).focus();
            $('#'+input_id).on('keypress', '#'+to_int_input_id, function(){

            });
            dd = parseInt(dd)+1;
            to_int_dd = parseInt(dd)+1;
            input_id = parseInt(input_id)+1;
            to_int_input_id = parseInt(input_id)+1;
            del_id = parseInt(del_id)+1;
            to_int_del_id = parseInt(del_id)+1;
            html_input = '';
        }
    });

这是我的HTML

<form method="get" action="<?= base_url('search/search_by_list')?>" id="onEnterId">
                                      <div style="background-color:#e18942; border-radius:5px 5px 0px 0px; color:#fff; height:30px; margin-top:-10px;">
                                        <label id="clearList" style="padding:7px 0px 0px 10px; cursor:pointer; width:50px; font-weight:normal;" onclick="clearAll()">Clear</label>
                                        <label id="help" style="padding:7px 0px 0px 10px; cursor:pointer; width:50px; font-weight:normal; float:right;">Help</label>
                                      </div>
                                      <div style="height:250px; overflow-y:auto; overflow-x:hidden; width:100%;">
                                          <ul style="list-style:decimal;" id="ulscroller">
                                             <li id="10001"><input type="text" class="search-list-input" id="90001" name="90001"><span style="cursor:pointer;" id="50001" onClick="clearInput(this);">×</span></li>
                                             <li id="10002"><input type="text" class="search-list-input" id="90002" name="90002"><span style="cursor:pointer;" id="50002" onClick="clearInput(this);">×</span></li>
                                             <li id="10003"><input type="text" class="search-list-input" id="90003" name="90003"><span style="cursor:pointer;" id="50003" onClick="clearInput(this);">×</span></li>
                                             <li id="10004"><input type="text" class="search-list-input" id="90004" name="90004"><span style="cursor:pointer;" id="50004" onClick="clearInput(this);">×</span></li>
                                             <li id="10005"><input type="text" class="search-list-input" id="90005" name="90005"><span style="cursor:pointer;" id="50005" onClick="clearInput(this);">×</span></li>
                                             <li id="10006"><input type="text" class="search-list-input" id="90006" name="90006"><span style="cursor:pointer;" id="50006" onClick="clearInput(this);">×</span></li>
                                             <li id="10007"><input type="text" class="search-list-input" id="90007" name="90007"><span style="cursor:pointer;" id="50007" onClick="clearInput(this);">×</span></li>
                                             <li id="10008"><input type="text" class="search-list-input" id="90008" name="90008"><span style="cursor:pointer;" id="50008" onClick="clearInput(this);">×</span></li>
                                             <li id="10009"><input type="text" class="search-list-input" id="90009" name="90009"><span style="cursor:pointer;" id="50009" onClick="clearInput(this);">×</span></li>
                                             <li id="10010"><input type="text" class="search-list-input" id="90010" name="90010"><span style="cursor:pointer;" id="50010" onClick="clearInput(this);">×</span></li>
                                          </ul>
                                      </div>
                                      <div style="background-color:#e18942; border-radius:0px 0px 5px px; text-align:center; height:50px; margin-top:10px;">
                                            <input type="button" id="onEnterSearch" name="Search" value="Search By List" style="background:transparent; color:#fff; margin-top:20px;">  
                                      </div>

我想在之前指定的html上输入输入字段，这是最后一个。在输入上最后一个工作正常，焦点转到下一个动态。但接下来就进入动态的一个是行不通的。对于下一个动态创建，我必须转到最后一个静态。请帮助我，因为我想知道几天。

Answer 1

<div>
    <button>Add</button>
</div>

cnt=0;

$('button').click(function(){
$('div').prepend('<p class="usual" data-id="'+cnt+'">alert me</p><input type="text" data-id="'+cnt+'">');
    cnt++;
})
$( document ).on( "click", ".usual", function() {
    alert($(this).data("id"));
})
$( document ).on( "keypress", "input", function() {
    alert($(this).data("id"));
})

选中JSFiddle。

Answer 2

您使用的事件绑定错误。使用.on绑定事件：

$(document).on('keypress', '#'+input_id, function(event) {/* ... */ });

Answer 3

使用jQuery.on函数，

$(document).on('keypress','selector',function(e){
   // To do here
});

参考jQuery文档http://api.jquery.com/on/

动态绑定元素不能在按键上工作

3 个答案: