Блог

Главная - Вопросы по программированию - Доступ к новому элементу, добавленному в качестве последнего элемента

Доступ к новому элементу, добавленному в качестве последнего элемента

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Привет,

     <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, но только тогда, когда фокус сосредоточен на последнем вводе div id-totmw первого li. Но по мере добавления нового li я хочу, чтобы был добавлен еще один новый li, сосредоточив внимание только на последнем поле ввода div id-totmw вновь добавленного элемента li. Помогите, пожалуйста.

Ответ №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");
});

Скрипка

Примечание: похоже, что вы динамически добавляете элементы с идентификатором, что создаст несколько элементов с одинаковым идентификатором, что недопустимо — попробуйте вместо этого использовать class .

Кроме того, старайтесь избегать встроенных стилей, что позволит избежать дублирования кода и сделает код намного чище: зачем использовать CSS

Комментарии:

1. Почему .last().after().. , почему не просто .append() ?

2. Кроме того, просто $('#data ul').on('focus','input:last' ...

3. @abhitalks idk. я исправил bloker проблему. у меня нет времени обучать query и это лучшие практики. это выходит за рамки простого ответа. нет необходимости отправлять комментарии в спам, вы всегда можете отредактировать свой комментарий в течение 5 минут…

4. Спасибо Ти Джею, кажется, это сработало. Тем не менее, я также хотел бы, чтобы CSS для остальной части документа был применен к новому элементу. Как я могу это сделать?

5. @абхираму нравится это? вам просто нужно добавить тот же HTML-код … обратите внимание, что вы добавляете элементы с идентификатором, что создаст несколько элементов с одинаковым идентификатором, что недопустимо … попробуйте использовать class вместо этого…

Ответ №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/

Ответ №3:

Используйте $(this).last() вместо $("#data ul").last()