訪問追加為最后一個元素的新元素

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，使其僅關注新添加的li元素的id-totmw的div的最后一個輸入字段。 請幫助。

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

小提琴

旁注：似乎您正在動態添加具有ID的元素，這將創建具有相同ID的多個元素，這是無效的-嘗試使用類。

另外，請嘗試避免使用內聯樣式，這將避免重復的代碼並使代碼更簡潔：為什么使用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>');
});

演示： http : //jsfiddle.net/K3j92/

Answer 3

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

訪問追加為最后一個元素的新元素

問題描述

3 個解決方案

解決方案1
1 已采納 2014-06-17 08:18:38

解決方案2
0 2014-06-17 08:29:50

解決方案3
-1 2014-06-17 08:30:43

訪問追加為最后一個元素的新元素

問題描述

3 個解決方案

解決方案1 1 已采納 2014-06-17 08:18:38

解決方案2 0 2014-06-17 08:29:50

解決方案3 -1 2014-06-17 08:30:43

解決方案1
1 已采納 2014-06-17 08:18:38

解決方案2
0 2014-06-17 08:29:50

解決方案3
-1 2014-06-17 08:30:43