Question

您好，

    <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>

在这里，我可以添加一个新的li元素，但只有当焦点位于第一个li的id-totmw的div的最后一个输入时。但是当附加一个新的li时，我希望在仅关注新附加的li元素的id-totmw的div的最后一个输入字段时添加另一个新的li。请帮助。

Answer 1

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

$('#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");
});

Fiddle

旁注：似乎你是动态添加带有id的元素，这将创建具有相同id的多个元素，这是无效的 - 请尝试使用类。

此外，尽量避免使用内联样式，这样可以避免重复代码并使代码更清晰：Why Use CSS

Answer 2

试试这个：

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

DEMO： http://jsfiddle.net/K3j92/

Answer 3

使用$(this).last()代替$("#data ul").last()

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

3 个答案: