Javascript 访问作为最后一个元素追加的新元素_Javascript_Jquery_Html

Javascript 访问作为最后一个元素追加的新元素

javascript jquery html

Javascript 访问作为最后一个元素追加的新元素,javascript,jquery,html,Javascript,Jquery,Html,嗨空中交通管制员 $（文档）.ready（函数（）{ $（“.datepicker”）.datepicker（）； $（'#data ul li:last div#totmw input:last'）。焦点（函数（）{ $（“#data ul”）.last（）。在（''）之后； //警报（“sel”）； }); }); 在这里，我可以添加一个新的li元素，但仅当重点放在第一个li的id totmw的div的最后一个输入上时。但是，随着一个新的li被附加，我希望再添加一个新的li，只

嗨


空中交通管制员
$（文档）.ready（函数（）{
$（“.datepicker”）.datepicker（）；
$（'#data ul li:last div#totmw input:last'）。焦点（函数（）{
$（“#data ul”）.last（）。在（'
'）之后；
//警报（“sel”）；
});
});

在这里，我可以添加一个新的li元素，但仅当重点放在第一个li的id totmw的div的最后一个输入上时。但是，随着一个新的li被附加，我希望再添加一个新的li，只关注新附加的li元素的id totmw的div的最后一个输入字段。请提供帮助。

由于元素是动态添加的，因此需要使用事件委派。使用方法如下

    <html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>ATC Master</title>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
         <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
             <script type="text/javascript">
                $(document).ready(function() {
                    $(".datepicker").datepicker();

                    $('#data ul li:last div#totmw input:last').focus(function(){
                    $("#data ul").last().after('<li><div style="float: left;"><input type="text" size="10"/></div><div id="totmw"><br><input type="text" size="10" class="datepicker"/><input type="text" size="10" class="totalmw"/></div><div style="clear: both;"></div></li>');
                    //alert("sel");
                    });
                });
            </script>
        </head>
        <body id="body-content">
        <form method="post" action="postATCMaster.htm">
            <div id="data" style="float: left;">
                <ul>
                    <li>
                        <div style="float: left;">
                            <input type="text" size="10"/>
                        </div>
                        <div id="totmw" style="float: left;">
                            <input type="text" size="10" class="datepicker"/>
                            <input type="text" size="10" class="totalmw"/>
                        </div>
                        <div style="clear: both;">
                        </div>
                    </li>
                </ul>
            </div>
        </form>
        </body>
    </html>

$（“#数据”）.on（'focus'，'li:last div#totmw input:last'，function（）{
$（“#data ul”）.last（）。在（'
'）之后；
//警报（“sel”）；
});

旁注：看起来您正在动态添加id为的元素，这将创建多个id相同的元素，这是无效的-尝试改用类

另外，尽量避免使用内联样式，这样可以避免重复的代码并使代码更干净：

尝试以下方法：

$('#data').on('focus','li:last div#totmw input:last',function(){
 $("#data ul").last().after('<li><div style="float: left;"><input type="text" size="10"/></div><div id="totmw"><br><input type="text" size="10" class="datepicker"/><input type="text" size="10" class="totalmw"/></div><div style="clear: both;"></div></li>');
 //alert("sel");
});

$（'#数据'）。在（'focus'，'li:last div#totmw input:last'，函数（）{
$（“#data ul”）.last（）。在（'
'）之后；
});

演示：

使用

$（this.last（）

而不是

$（“#数据ul”）.last（）

为什么

.last（）.after（）

为什么不只是

.append（）

？还有，

$（“#数据ul'）。在（'focus'，'input:last'…

@abhitalks idk。我修复了

bloker

问题。我没有时间教授查询和它的最佳实践。这超出了简单答案的范围。没有必要垃圾评论，你可以在5分钟内编辑你的评论…谢谢TJ，它似乎有效。不过，我也希望CSS用于res要应用于新元素的文档的t。我如何才能做到这一点？@abhiram您只需附加相同的html…注意，您正在添加id为的元素，这将创建具有相同id的多个元素，这是无效的…请尝试改用

class

。。。

$('#data').on('focus', 'li:last div#totmw input:last', function () {
$("#data ul").last().after('<li><div style="float: left;"><input type="text" size="10"/></div><div id="totmw"><br><input type="text" size="10" class="datepicker"/><input type="text" size="10" class="totalmw"/></div><div style="clear: both;"></div></li>');
});